ポップアップ マスク、メタ コンテンツの意味_html/css_WEB-ITnose

<span style="font-size:12px;"><meta http-equiv="Content-Type"content="text/html; charset=utf-8">//编码<meta id="viewport"name="viewport"content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/> <meta name=”apple-mobile-web-app-capable” content=”yes” />// 离线应用的另一个技巧     <meta name=”apple-mobile-web-app-status-bar-style” content=black” />// 隐藏状态栏       <meta content="black"name="apple-mobile-web-app-status-bar-style"/>//指定的iphone中safari顶端的状态条的样式        <meta content="telephone=no"name="format-detection"/>//告诉设备忽略将页面中的数字识别为电话号码<style media="all and (orientation:portrait)"type="text/css">#landscape { display: none; }</style>//竖屏时使用的样式<style media="all and (orientation:landscape)"type="text/css">#portrait { display: none; }</style>//横屏时使用的样式</span>

レンダリング:

html:

原則は、ボタンがオンになっているときにマスクされたレイヤーに幅と高さ 100% の隠し DIV レイヤーを追加することです。クリックされました マスクされたレイヤーをクリックしてフォーカスを失うことができないように、このレイヤーを表示します。ポップアップしたレイヤー（決定画面）のZ軸位置を設定します。Z-INDEXが最も高くなります。

<span style="font-size:12px;"><div id="brg"></div><div id="showdiv"><div class="btn"><a href="#" id="close"><span >取消</span></span></a></div></div><a href="#" id="lay"><span>确定</span></a></span>

#brg{width:100%; height:100%;filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; display:none;}#showdiv{z-index:20; display:none; }

2014-8-19: 新しいマスク層の実装: ie6 と互換性があります:

<div id="brg"></div><div class="vip_none"><div class="close_btn"><a href="javascript:void(0)" id="close_btn"><img src="images/close_btn.png" height="23" width="23"></a></div><p>VIP充值尚未开放<br><br> 敬请期待～</p></div>

りー