html5如何实现弹出提示框，并且伴随遮罩层并且可以关闭弹出框 js如何实现关闭js弹出层的窗口
HTML\u5982\u4f55\u505a\u4e00\u4e2a\u5f39\u51fa\u6846\uff0c\u5e76\u4e14\u8be5\u5f39\u51fa\u6846\u4e0d\u70b9\u6389\uff0c\u65e0\u6cd5\u64cd\u4f5c\u5176\u4ed6\u9875\u9762\u7528\u906e\u7f69\u5c31\u884c
Jquery\u906e\u7f69\u5c42
#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv .form{padding:10px;}
#DialogDiv2{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv2 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv2 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv2 .form{padding:10px;}
#DialogDiv3{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv3 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv3 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv3 .form{padding:10px;}
function ShowDIV(thisObjID) {
$("#BgDiv").css({ display: "block", height: $(document).height() });
var yscroll = document.documentElement.scrollTop;
$("#" + thisObjID ).css("top", "100px");
$("#" + thisObjID ).css("display", "block");
document.documentElement.scrollTop = 0;
}
function closeDiv(thisObjID) {
$("#BgDiv").css("display", "none");
$("#" + thisObjID).css("display", "none");
}
\u5f39\u51fa\u5c42\u5173\u95ed
\u6211\u662f\u5f39\u51fa\u5bf9\u8bdd\u6846111111\uff01\uff01
\u5f39\u51fa\u5c42\u5173\u95ed
\u6211\u662f\u5f39\u51fa\u5bf9\u8bdd\u68462222\uff01\uff01
\u5f39\u51fa\u5c42\u5173\u95ed
\u6211\u662f\u5f39\u51fa\u5bf9\u8bdd\u68463333333\uff01\uff01
\u4e24\u79cd\u65b9\u6cd5\uff1a\u53bb\u9664\u548c\u9690\u85cf
//\u521b\u5efa\u4f60\u7684\u5f39\u51fa\u5c42
var dvMsg = document.createElement("div");
strHtml = "\u5f39\u51fa\u5c42\u5185\u5bb9"
strHtml += " "
dvMsg.innerHTML = strHtml;
document.body.appendChild(dvMsg);
// \u5173\u95ed\u6309\u94ae
btnclick = function (){
document.body.removeChild(dvMsg);
-------------------------
\u6216\u8005 \u5f39\u51fa\u5c42\u7528div id\u6807\u8bb0
\u5f39\u51fa\u5c42\u5185\u5bb9
js\u91cc
function open(){
document.getElementById(tanchu).style.display=""; //\u663e\u793a
}
function close(){
document.getElementById(tanchu).style.display="none"; //\u4e0d\u663e\u793a\uff08\u9875\u9762\u521d\u59cb\u5316\u7684\u65f6\u5019\u540c\u6837\u52a0\u8f7d\u4e00\u904d\uff09
}
通过jquery的show()和hide()函数联合使用，实现弹出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、弹出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看弹出窗口结果：
七、关闭弹出窗后，打开开发者中心，如下：
你好，遮罩层样式可以用CSS写，用js/jquery控制显示隐藏就可以了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
*{padding: 0; margin: 0}
.box{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: none;
}
.box1{
width: 500px;
height: 500px;
position: fixed;left: 50%; top: 25%;
margin-left: -250px;
border: 1px solid #000000;
}
</style>
<script>
</script>
</head>
<body>
<div class="box">
<div class="box1">
<a href="javascript:;" onclick="jQuery('.box').hide()" class="close">关闭</a>
</div>
</div>
<a href="javascript:;" onclick="jQuery('.box').show()" class="show">显示</a>
</body>
</html>
<div id="show">
<div data-role="controlgroup" id="btnGroups" data-type="vertical" style="min-height:80px; max-height:237px;overflow-y:auto;">
<label for="1">1</label><input type="radio" name="a" id="1" value="1" />
<label for="2">2</label><input type="radio" name="a" id="2" value="2" />
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a name="yes" data-role="button" style="display: block;font-size:16px;">同意</a>
</div>
<div class="ui-block-b">
<a data-role="button" id="cancelBtnPage" style="display: block;font-size:16px;">取消</a>
</div>
</div>
</div>
<div id="bg"></div>
<a href="#" data-role="button" id="yesNextBtn" style="display: block;font-size:16px;">同意</a>
-------------------------------------------------------------------------------------
Js代码
$('#yesNextBtn').click(function(){
//消除radio按钮上的checked
$('#btnGroups').find('input[type=radio]').each(function(){
$(this).removeProp("checked").checkboxradio("refresh");
})
document.getElementById("bg").style.display ="block";
document.getElementById("show").style.display ="block";
$('html,body').animate({scrollTop: '0px'}, 100);//因为页面很长，有纵向滚动条，先让页面滚动到最顶端，然后禁止滑动事件，这样可以使遮罩层锁住整个屏幕
$('#bg').bind("touchmove",function(e){
e.preventDefault();
});
})
-------------------------------------------------------------------------------------
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 18%; width: 63%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆html缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<body>鏍囩涓紝杈撳叆html浠ｇ爜锛<input type="text" placeholder="娓呰緭鍏ョ敤鎴峰悕" />銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾枃鏈鍒濆鏈夋枃瀛椼4銆佺偣鍑绘枃鏈妗嗭紝鏂囧瓧鎴愬姛娑堝け銆
绛旓細浣跨敤html5鐨勬闈㈤氱煡鍔熻兘html5 Notification锛岃繍琛岃繖涓唬鐮侊紝鐒跺悗鐐瑰悓鎰忋傚啀鍒囧埌鍏跺畠椤甸潰锛2绉掑悗锛屼綘鍦ㄥ叾瀹冮〉闈篃鑳界湅瑙佸彸涓嬭鐨鎻愮ず妗嗭紝鐐瑰嚮鍙互璋冨埌寮瑰嚭鎻愮ず妗鐨勯〉闈傚湪杩欎釜椤甸潰鏌ョ湅鍏煎鎬ttp://caniuse.com/#search=Notification 濡傛灉瀵瑰吋瀹规ф湁瑕佹眰锛屽彲浠ユ妸浣犵殑椤甸潰鐨則itle鍔ㄦ佹敼鍙樺唴瀹癸紝浣跨敤鎴锋敞鎰忓埌...
绛旓細html5 鍙互鐩存帴鐢 placeholder="璇疯緭鍏ュ憳宸ュ彿"js鐨勮瘽 浣犻渶瑕佸鍒朵綔鐨勪竴涓爣绛撅紝姣斿span锛岃鐩栧湪杈撳叆妗嗙殑涓婃柟 榧犳爣杩涘叆鐨勬椂鍊欐樉绀鸿繖涓猻pan锛岀寮鐨勬椂鍊欏氨闅愯棌锛屽師鐞嗗氨鏄繖鏍
绛旓細杩欎釜鏄笉鍙互鍘绘帀鐨勶紝濡傛灉闇瑕鎻愮ず鐨勮瘽锛屽彲浠ヨ瘯涓涓媗ayer杩欎釜js搴擄紝鎸哄ソ鐨勶紙鎴戜笉鏄粬浠殑浜-銆-锛夛紝寤鸿鎻愮ず涓嶈鐢ㄥ師鐢焜s鐨
绛旓細鐩存帴浜嗗綋 瀹屽叏 javascript鐨勪唬鐮侊細document.getElementById("ID").style.fontSize = XXpx;
绛旓細鍦ㄧ嚎婕旂ず婧愮爜涓嬭浇6銆丠TML5琛楀ご闇哥帇娓告垙杩欐缁忓吀鐨勮鏈烘父鎴忎篃宸茬粡鐢HTML5瀹炵幇鐨勶紝鏁堟灉闈炲父閫肩湡锛屼綘鍙互鏍规嵁鎻愮ず鐨勬寜閿繘琛屾父鎴忎綋楠屻傚湪绾挎紨绀烘簮鐮佷笅杞7銆乯Query涔︽湰缈婚〉3D鍔ㄧ敾鐗规晥杩欐槸涓涓熀浜巎Query鐨3D涔︽湰缈婚〉鍔ㄧ敾鏁堟灉锛岀炕椤垫晥鏋滃崄鍒嗘祦鐣呫傚湪绾挎紨绀烘簮鐮佷笅杞8銆丠TML5/CSS3鎻愮ず妗鍔ㄧ敾 甯﹁繘搴︽潯杩欐鎻愮ず妗嗗姩鐢诲湪...
绛旓細}</script> 31081020 | 鍙戝竷浜2010-05-11 涓炬姤| 璇勮 1 0 鍙互鐢╟onfire鍜宎lert瀹炵幇鐨.浠栦滑鐨勪綘璇曡瘯 wangboailiu | 鍙戝竷浜2010-05-11 涓炬姤| 璇勮 0 0 鍏朵粬1鏉″洖绛 涓烘偍鎺ㄨ崘: jquery寮瑰嚭鎻愮ず妗 瓒呴摼鎺ョ偣涓嶅紑 鐐瑰嚮瓒呴摼鎺ヤ笉璺宠浆 alert寮瑰嚭閾炬帴 涓夋槦鐢佃剳鎵撳紑瓒呴摼鎺 js寮瑰嚭纭妗 html 寮...
绛旓細妫鏌ユ祻瑙堝櫒鏄惁鏀寔Notification 妫鏌ユ祻瑙堝櫒鐨勯氱煡鏉冮檺锛堟槸鍚﹀厑璁搁氱煡锛夎嫢鏉冮檺涓嶅鍒欒幏鍙栨祻瑙堝櫒鐨勯氱煡鏉冮檺 鍒涘缓娑堟伅閫氱煡 灞曠ず娑堟伅閫氱煡NOTE: 鍏充簬绗竴鐐圭殑璇存槑闇瑕佸仛涓浜涜鏄庯紝Notification鐩墠杩樻病鏈夋爣鍑嗗寲锛屾墍浠ョ洰鍓嶅彧鏀寔chrome19+鍜宻afari6+锛涚綉涓婃湁璧勬枡鏄剧ずFirefox26+涔熸敮鎸侊紝浣嗘槸鎴戞嬁鎴戠殑Firefox27妫娴嬬殑...
绛旓細html5鏂板鐨勪竴涓睘鎬э紝<input type='text' placeholder='璇疯緭鍏ヨ处鍙'/> 杩欐牱鍦ㄤ綘瑕佽緭鍏ユ枃瀛楃殑鏃跺欒繖涓鎻愮ず璇彞浼氳嚜鍔ㄦ秷澶
绛旓細<command> 瀹氫箟鍛戒护鎸夐挳锛屾瘮濡傚崟閫夋寜閽佸閫夋鎴栨寜閽 <details> 鐢ㄤ簬鎻忚堪鏂囨。鎴栨枃妗ｆ煇涓儴鍒嗙殑缁嗚妭 <dialog> 瀹氫箟瀵硅瘽妗嗭紝姣斿鎻愮ず妗 <summary> 鏍囩鍖呭惈 details 鍏冪礌鐨勬爣棰 <figure> 瑙勫畾鐙珛鐨勬祦鍐呭锛堝浘鍍忋佸浘琛ㄣ佺収鐗囥佷唬鐮佺瓑绛夛級銆<figcaption> 瀹氫箟 <figure> 鍏冪礌鐨勬爣棰 <foo...
