TA貢獻1799條經(jīng)驗 獲得超9個贊
你好，遮罩層樣式可以用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">關(guān)閉</a> </div> </div> <a href="javascript:;" onclick="jQuery('.box').show()" class="show">顯示</a></body></html> |
TA貢獻1795條經(jīng)驗 獲得超7個贊
通過jquery的show()和hide()函數(shù)聯(lián)合使用，實現(xiàn)彈出窗口。
一、show（）和hide（）函數(shù)解析：
1、show() 方法顯示隱藏的被選元素。
注意：show() 適用于通過 jQuery 方法和 CSS 中 display:none 隱藏的元素（不適用于通過 visibility:hidden 隱藏的元素）。
2、hide() 方法隱藏被選元素。
這與 CSS 屬性 display:none 類似，但是隱藏的元素不會被完全顯示（不再影響頁面的布局）。
二、設(shè)計一個HTML頁面，包括一個簡單的彈出窗，和一個顯示按鈕。其中，調(diào)用了jquery的以上兩個函數(shù)。具體代碼如下：
三、設(shè)計遮罩層的樣式，如下：
四、彈出窗口的css樣式，代碼如下：
五、初始頁面如下：
六、點擊按鈕，查看彈出窗口結(jié)果：
七、關(guān)閉彈出窗后，打開開發(fā)者中心，如下：
TA貢獻1876條經(jīng)驗 獲得超7個贊
<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;}
舉報