jquery彈出遮掩層效果【附實(shí)例代碼】
找了個(gè)別人寫(xiě)的遮掩層進(jìn)行改善,感覺(jué)效果還可以。
效果圖:
代碼:
<!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>tipswindown</title> <link href="css/tipswindown.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.8.js" type="text/javascript"></script> <script src="js/tipswindown.js" type="text/javascript"></script> <style type="text/css"> #main{width:300px;margin:50px auto;font-family: Arial, Calibri;} #main .btn {width:150px;height:30px;line-height:30px;font-size:14px; vertical-align:middle; color: #333333; font-weight:bold; text-decoration:none; display:block; text-align:center;background: #CCC;} #main .btn:hover{vertical-align:middle; color: #fff; font-weight:bold; text-decoration:none;display:block; text-align:center;background: #333;} </style> <script type="text/javascript"> $(function () { $("#DialogShow").click(function () { tipsWindown("CnBlogs", "id:dialog", "450", "200", "true", "", "true", "id"); }); }) function Ok() { window.location.; } function Cancel() { $("#windownbg").remove(); $("#windown-box").fadeOut("1000", function () { $(this).remove(); }); } </script> </head> <body> <div id="main"> <a href="javascript:void(0);" class="btn" id="DialogShow">DialogShow</a> </div> <div id="dialog" style="display:none";> <div class="dialogtext"> <p>Please click on the ok button to go the http://www.cnblogs.com/ website and you should just wait. </p> <p>If you are accessing this page by mistake please click on the cancel link.</p> </div> <div class="dislogbtn"> <a href="javascript:void(0);" class="btn" id="Ok" onclick="Ok()">Ok</a> <a href="javascript:void(0);" class="btn" id="Cancel" onclick="Cancel()">Cancel</a> </div> </div> </body> </html>
以上這篇jquery彈出遮掩層效果【附實(shí)例代碼】就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Easyui Datagrid自定義按鈕列(最后面的操作列)
做項(xiàng)目的時(shí)候因?yàn)樾枨?要在表格的最后添加一列操作列,easyUI貌似沒(méi)有提供這種功能,下面我們來(lái)自定義按鈕列,具體實(shí)現(xiàn)代碼,大家參考下本文吧2017-07-07jQuery Easyui 驗(yàn)證兩次密碼輸入是否相等
easyui是一種基于jQuery的用戶界面插件集合。接下來(lái)通過(guò)本文給大家介紹jQuery Easyui 驗(yàn)證兩次密碼輸入是否相等的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-05-05JQuery實(shí)現(xiàn)的在新窗口打開(kāi)鏈接的方法小結(jié)
jQuery 實(shí)現(xiàn)在新窗口中打開(kāi)鏈接方法,收集了幾個(gè),大家可以根據(jù)需要選擇使用。2010-04-04jquery選擇器中的空格與大于號(hào)>、加號(hào)+與波浪號(hào)~的區(qū)別介紹
這篇文章主要介紹了jquery選擇器中的空格與大于號(hào)>、加號(hào)+與波浪號(hào)~的區(qū)別介紹的相關(guān)資料,需要的朋友可以參考下2016-06-06jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實(shí)例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼2009-12-12jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼,需要的朋友可以參考下2014-02-02jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼,通過(guò)自定義fixedMenu方法實(shí)現(xiàn)點(diǎn)擊下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08