求html代码，点击按钮弹出层，再次点击关闭层？ jquery 点击标题弹出内容和遮罩层后，点击关闭按钮怎么关...
\u6c42\u70b9\u51fb\u5f39\u51fa\u5c42\u7684html\u4ee3\u7801~var isIe = (document.all) ? true : false;
//\u8bbe\u7f6eselect\u7684\u53ef\u89c1\u72b6\u6001
function setSelectState(state) {
var objl = document.getElementsByTagName('select');
for (var i = 0; i < objl.length; i++) {
objl[i].style.visibility = state;
}
}
function mousePosition(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//\u5f39\u51fa\u65b9\u6cd5
function showMessageBox(wTitle, content, pos, wWidth) {
closeWindow();
var bWidth = parseInt(document.documentElement.scrollWidth);
var bHeight = parseInt(document.documentElement.scrollHeight);
if (isIe) {
setSelectState('hidden');
}
var back = document.createElement("div");
back.id = "back";
var styleStr = "top:0px;left:0px;position:absolute;background:#666;width:" + bWidth + "px;height:" + bHeight + "px;";
styleStr += (isIe) ? "filter:alpha(opacity=0);" : "opacity:0;";
back.style.cssText = styleStr;
document.body.appendChild(back);
showBackground(back, 50);
var mesW = document.createElement("div");
mesW.id = "mesWindow";
mesW.className = "mesWindow";
mesW.innerHTML = "" + wTitle + "" + content + "";
styleStr = "left:" + (((pos.x - wWidth) > 0) ? (pos.x - wWidth) : pos.x) + "px;top:" + (pos.y) + "px;position:absolute;width:" + wWidth + "px;";
mesW.style.cssText = styleStr;
document.body.appendChild(mesW);
}
//\u8ba9\u80cc\u666f\u6e10\u6e10\u53d8\u6697
function showBackground(obj, endInt) {
if (isIe) {
obj.filters.alpha.opacity += 1;
if (obj.filters.alpha.opacity < endInt) {
setTimeout(function() { showBackground(obj, endInt) }, 5);
}
} else {
var al = parseFloat(obj.style.opacity); al += 0.01;
obj.style.opacity = al;
if (al < (endInt / 100))
{ setTimeout(function() { showBackground(obj, endInt) }, 5); }
}
}
//\u5173\u95ed\u7a97\u53e3
function closeWindow() {
if (document.getElementById('back') != null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if (document.getElementById('mesWindow') != null) {
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if (isIe) {
setSelectState('');
}
}
//\u6d4b\u8bd5\u5f39\u51fa
function testMessageBox(ev, ob) {
var objPos = mousePosition(ev);
messContent = "";
showMessageBox('', messContent, objPos, 620);
}
\u5728\u524d\u53f0\u8c03\u7528\uff1a
onclick="testMessageBox(event,'\u56fe\u7247\u7684\u8def\u5f84');"
\u56fe\u7247\u8def\u5f84\u4f60\u6bd4\u5982\u8bf4\u5728C:\a.jpg,\u4f60\u5c31\u53ef\u4ee5\u628a\u8def\u5f84\u586b\u8fdb\u53bb\uff0c\u8fd9\u6837\u5c31OK\u4e86\uff0c\u4f60\u53ef\u4ee5\u8bd5\u8bd5
$(".close").click(function(){$(this).parent("dd").hide();$('#layer').hide();})
首先你要写好两条CSS，用以切换控制按钮样式（以下代码中省略宽高等声明）：
.button {background:url(images/1.jpg) center no-repeat;} /* 默认样式 */
.button-hover {background-image:url(images/2.jpg);} /* 鼠标悬停及弹出层时样式 */然后用JS来控制属性：
var oBtn = document.getElementById('btn'); // 假设按钮的id为btn
var oDiv = document.getElementById('div'); // 假设弹出层的id为div
// 鼠标悬停
oBtn.onmouseover = function() {
oBtn.className = 'button button-hover';
}
// 鼠标移出
oBtn.onmouseout = function() {
oBtn.className = 'button';
}
// 点击按钮
oBtn.onclick = function() {
if (oDiv.style.display == 'none') { // 如果层是隐藏的
oDiv.style.display = 'block';
oBtn.className = 'button button-hover';
} else { // 如果层是显示的
oDiv.style.display = 'none';
oBtn.className = 'button';
}
}用jQuery的话代码如下：
var oBtn = $('#btn');
var oDiv = $('#div');
oBtn.hover(function() {
$(this).addClass('button-hover');
}, function(){
$(this).removeClass('button-hover');
}).click(function() {
if (oDiv.is(':hidden')) {
oDiv.show();
$(this).addClass('button-hover');
} else {
oDiv.hide();
$(this).removeClass('button-hover');
}
});
需要用JS写
绛旓細1銆侀鍏堟垜浠湪椤甸潰鏀剧疆涓涓敤鏉ヨЕ鍙寮瑰嚭灞鐨勯摼鎺ワ紝涔熷彲浠ユ槸涓鎸夐挳button锛娉ㄦ剰鐨勬槸鎴戜滑缁欏畠璁剧疆涓涓猟ata-show-layer灞炴э紝杩欎釜灞炴у煎搴旂殑灏辨槸寮瑰嚭灞傜殑id锛屼篃灏辨槸璇撮氳繃data-show-layer鏉ュ叧鑱斿脊鍑哄眰銆2銆佸緢鏄剧劧锛屼笂闈㈢殑閾炬帴鍏宠仈鐨勫脊鍑哄眰鐨刬d鏄痟w-layer銆傞偅濂斤紝閫夋嫨鎴戜滑鏉ュ噯澶囧脊鍑哄眰hw-layer鐨html浠ｇ爜...
绛旓細<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 鐢―IV妯℃嫙寮瑰嚭绐楀彛骞惰窡闅忕獥浣撴粴鍔</title> <script> function getPosition() { var top = document.documentElement.scrollTop;var left = document.documentElement.scrollLeft;var he...
绛旓細}]</script><style>#div{width:100px; height:100px;background:red; position:absolute; left:50%; top:50%; margin:-50px 0 0 -50px;}</style>//涓嬮潰鏄痓ody閲岀殑閮ㄥ垎<div id="div"></div><input type="button" value="鐐瑰嚮" id="btn"/>浠ヤ笂鏄竴涓畝鍗曠殑鐐瑰嚮鎸夐挳寮瑰嚭涓涓眳涓殑...
绛旓細姣斿 <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> 鏄剧ずdiv涓: document.getElementById("d1").style.display = '';闅愯棌涓猴細document.getElementById("d1").style.display = 'none';鍏朵腑d1涓篸iv鐨処D锛屽叾浠栧眰鐢ㄧ浉鍚岀殑鍔炴硶澶勭悊 ...
绛旓細</html> 鐩存帴鐪嬭繖娈浠ｇ爜鍚,鐐瑰嚮鎸夐挳涓嬮潰鐨勬鏄剧ず,鐐瑰嚮鍒娑堝け,鐪嬮噷闈㈤噸鐐圭殑鍦版柟 鏈洖绛旂敱鎻愰棶鑰呮帹鑽 涓炬姤| 绛旀绾犻敊 | 璇勮(2) 26 4 chinayanweixin 閲囩撼鐜:45% 鎿呴暱: 鐢佃剳/缃戠粶 绯荤粺杞欢 鎿嶄綔绯荤粺/绯荤粺鏁呴殰 C#/.NET 瀹夊叏杞欢 鍏朵粬鍥炵瓟 (1)棣栧厛浣犲緱寮曠敤jQury.js(2)鍋囪浣犲緱杩欎釜寮瑰嚭妗嗘斁鍦ㄤ竴涓猟iv...
绛旓細鍙互鍏堝啓濂姐傛瘮濡 <div class="popup"> <div class="hd">鏍囬鏍</div> <div class="bd"> <p>寮瑰嚭鍐呭</p> <p>寮瑰嚭鍐呭</p> <p>寮瑰嚭鍐呭</p> </div> </div> 鐒跺悗js鎺у埗杩欎釜div鏄剧ず鍗冲彲
绛旓細鍏跺疄寮瑰嚭灞鐨勬濊矾杩樻槸姣旇緝绠鍗曠殑锛氫竴鑸槸杩欎釜灞傛槸闅愯棌鐨(display:none)锛岀劧鍚鐐瑰嚮浣犺鐨"鍥剧墖(鎴栬呬换浣曠殑椤甸潰鍏冪礌)"锛岃繖涓眰灏变細鏄剧ず锛堜竴鑸琩isplay:inline-block/block锛夛紝鍚屾椂璁剧疆涓涓伆鑹茬殑鑳屾櫙鐪嬭捣鏉ヨ繖涓眰鏄诞浜庝笅闈㈢殑灞備箣涓婄殑銆備笅闈㈡槸涓娈垫紨绀浠ｇ爜锛<!doctype html><html><head><meta charset="utf...
绛旓細鍒氭墠鎶婄綉椤靛垎鎴愪簡涓夐儴鍒,鎴戞兂鍦鐐瑰嚮宸︿晶閾炬帴鏃,寮瑰嚭灞,灞備腑寮瑰嚭鏉ヤ簡,涓嶈繃鍙鐩栦簡宸︿晶閮ㄥ垎,鎬庝箞璁╁畠瑕嗙洊鎬庝箞椤甸潰鍛,鎬,鍚勪綅澶ц櫨澶氬皯鎸囩偣銆傘傘傚尶鍚 | 娴忚8218 娆 |涓炬姤 鎴戞湁鏇村ソ鐨勭瓟妗堟帹鑽愪簬2017-12-15 13:27:32 鏈浣崇瓟妗 缂栧啓HTML浠ｇ爜鏃跺欑敤Iframe涓脊鍑哄眰瑕嗙洊鏁翠釜椤甸潰,浠ｇ爜濡備笅: 1 2 3 4 5 6 7 8...
绛旓細杩欎釜闂鎴戣鍊掔潃缁欎綘瑙ｉ噴锛岃繖鏍锋瘮杈冨鏄撱傜涓姝鐐瑰嚮鍏朵粬鍖哄煙锛岃繖涓猟iv娑堝け銆傚缓璁綘鍦ㄨ繖涓猟iv澶栧眰鍔犱竴灞俹verlay锛岃繖涓猳verlay閬綇闄iv涔嬪鎵鏈夊叾浠栦笢瑗裤傝繖鏍锋瘮杈冨ソ鍒ゆ柇鏄笉鏄偣鍑荤殑杩欎釜div銆傚嚱鏁板涓嬶紝鍔熻兘鏄偣鍑籵verlay涔嬪悗overlay娑堝け銆俤iv鏄湪overlay鍐呯殑锛屽綋鐒朵篃浼氭秷澶便('overlay').click(function(){ ...
绛旓細瀹冩病鏈夋斁鍑鸿繖鏂归潰鐨勫弬鏁帮紝榛樿灏辨槸鐐瑰嚮浠讳綍浣嶇疆浼氬叧闂傛垜鐪嬩簡涓涓嬶紝lightbox缁勪欢鐗堟湰杈冨锛屾垜鏃犳硶鐩存帴鍛婅瘔浣犲湪鍝竴琛岋紝浣犲彲浠ヨ嚜宸卞幓鎼滅储涓涓媍lick锛岀劧鍚庢壘鍒扮被浼艰繖娈浠ｇ爜 (document).on/bind('click',xxx)鎴栬$(document).click(xxx)鎶婅繖琛屾敞閲婃帀灏卞ソ浜 ...
