jquery div模態(tài)窗口的簡(jiǎn)單實(shí)例
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ù)值越大,離用戶(hù)越近 */ 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ù)值越大,離用戶(hù)越近 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è)參考,也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)底部浮動(dòng)窗口效果
- jQuery之浮動(dòng)窗口實(shí)現(xiàn)代碼(兩種方法)
- JQuery 實(shí)現(xiàn)的頁(yè)面滾動(dòng)時(shí)浮動(dòng)窗口控件
- jQuery實(shí)現(xiàn)頁(yè)面下拉100像素出現(xiàn)懸浮窗口的方法
- jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
- jQuery實(shí)現(xiàn)的Div窗口震動(dòng)效果實(shí)例
- jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
相關(guān)文章
eclipse如何忽略js文件報(bào)錯(cuò)(附圖)
eclipse中js文件報(bào)錯(cuò)的情況,或許大家早已習(xí)以為常了,那么有什么好的方法可以將其忽略掉呢?如果你也在尋找此問(wèn)題,那么本文或許可以幫助到你2013-10-10JavaScript中的數(shù)學(xué)運(yùn)算介紹
這篇文章主要介紹了JavaScript中的數(shù)學(xué)運(yùn)算介紹,本文先是講解了數(shù)學(xué)運(yùn)算的一些知識(shí),然后給出了操作實(shí)例,需要的朋友可以參考下2014-12-12uniapp調(diào)用百度語(yǔ)音實(shí)現(xiàn)錄音轉(zhuǎn)文字功能
這篇文章主要介紹了uniapp通過(guò)調(diào)用百度語(yǔ)音,實(shí)現(xiàn)錄音轉(zhuǎn)文字的功能。文中的示例代碼對(duì)我們學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以跟隨小編學(xué)習(xí)一下2021-12-12如何根據(jù)url?批量下載二維碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了如何根據(jù)url批量下載二維碼實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05解讀Bootstrap v4 sass設(shè)計(jì)
這篇文章主要介紹了Bootstrap v4 sass設(shè)計(jì)的相關(guān)資料,需要的朋友可以參考下2016-05-05ionic js 模型 $ionicModal 可以遮住用戶(hù)主界面的內(nèi)容框
這篇文章主要介紹了ionic js 模型 $ionicModal 可以遮住用戶(hù)主界面的內(nèi)容框的相關(guān)資料,需要的朋友可以參考下2016-06-06javascript內(nèi)置對(duì)象Math案例總結(jié)分析
今天總結(jié)一下javascript 內(nèi)置對(duì)象Math中的函數(shù)用法,順帶寫(xiě)一下常見(jiàn)的案例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-03-03JS 實(shí)現(xiàn)Table相同行的單元格自動(dòng)合并示例代碼
Table相同行的單元格自動(dòng)合并,使用js來(lái)實(shí)現(xiàn)此效果,具體代碼下,感興趣的朋友可以參考下2013-08-08