jquery div模態(tài)窗口的簡(jiǎn)單實(shí)例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>test</title> <script src="../../js/lib/jquery.js"></script> <style type="text/css"> .pop-box { /*彈出窗口后，彈出的DIV采用此CSS，保證置于最上層 z-index控制Z軸的坐標(biāo)，數(shù)值越大，離用戶越近 */ z-index: 9999999; /*這個(gè)數(shù)值要足夠大，才能夠顯示在最上層*/ margin-bottom: 3px; display: none; position: absolute; background: gray; border: solid1px #6e8bde; } #bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; /*彈出窗口后，添加遮罩層，采用此CSS，將該層置于彈出DIV和頁(yè)面層之間 z-index控制Z軸的坐標(biāo)，數(shù)值越大，離用戶越近 rgba(72, 74, 68, 0.46) */ z-index: 1001; background-color:#8f9f8f; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity = 70); } </style> <script type="text/javascript"> function popupDiv(div_id) { // 獲取傳入的DIV var $div_obj = $("#" + div_id); // 計(jì)算機(jī)屏幕高度 var windowWidth = $(window).width(); // 計(jì)算機(jī)屏幕長(zhǎng)度 var windowHeight = $(window).height(); // 取得傳入DIV的高度 var popupHeight = $div_obj.height(); // 取得傳入DIV的長(zhǎng)度 var popupWidth = $div_obj.width(); // // 添加并顯示遮罩層 $("<div id='bg'></div>").width(windowWidth * 0.99) .height(windowHeight * 0.99).click(function() { //hideDiv(div_id); }).appendTo("body").fadeIn(200); // 顯示彈出的DIV $div_obj.css({ "position" : "absloute" }).animate({ left : windowWidth / 2 - popupWidth / 2, top : windowHeight / 2 - popupHeight / 2, opacity : "show" }, "slow"); } /*隱藏彈出DIV*/ function hideDiv(div_id) { $("#bg").remove(); $("#" + div_id).animate({ left : 0, top : 0, opacity : "hide" }, "slow"); } </script> </head><body> <div id='pop-div' style="width: 300px;height:500px;" class="pop-box"> <h4 class="pop-boxh4">22</h4> <div class="pop-box-body"> <p>33</p> </div> <div id='buttonPanel' style="text-align: right" style="text-align:right"> <input type="button" value="Close" id="btn1" onclick="hideDiv('pop-div');" /> </div> </div> <input type="button" value="21" onclick="popupDiv('pop-div')" style="cursor: pointer;"> <div>2222222333</div> <input type="text"></input></body></html> 以上這篇jquery div模態(tài)窗口的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
