jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框的具體代碼,供大家參考,具體內(nèi)容如下
1.html里面隱藏好一個(gè)div
<div class="dialog" id="delallpartdialog"> <div class="title"> <img alt="點(diǎn)擊可以關(guān)閉" src="/static/images/disk.png" width="30px" height="30px;"> 刪除時(shí)提示 </div> <div class="content"> <img alt="" src="delete.gif" width="60px" height="60px"> <span>你真的要?jiǎng)h除所有分區(qū)嗎?</span> </div> <div class="bottom"> <input type="button" value="確定" class="btnok"> <input type="button" value="取消" class="btnnoOk"> </div> </div>
2.css樣式里面增加一個(gè)彈出對(duì)話框的樣式
.dialog{width:360px;border:1px #666 solid;position:absolute;display:none;z-index:101;} .dialog .title {background: #333;padding:10px; color: #fff; font-weight: bold; } .dialog .title img {float: right;} .dialog .content {background: #fff;padding:25px;height: 60px;} .dialog .content img {float: left;} .dialog .content span {float: left;padding:10px;} .dialog .bottom {text-align: right;padding:10px 10px 10px 0px;background: #eee;} .dialog .btn {border: #666 1px solid;width:65px;}
3.js里面監(jiān)控點(diǎn)擊彈框和彈框后的確定和取消動(dòng)作
$(".delallpart").on("click",function () { $.ajax({ url:"/osd/opt/delallpart", type: "POST", datatype:'json', data: {"action":"del_all","del_mount":"2"}, beforeSend: function (xhr, settings) { xhr.setRequestHeader("X-CSRFToken", getCookie2('csrftoken')); }, success: function (arg) { var div = $("#delallpartdialog"); div.css("display", "block"); div.css("left", 500).css("top", 500); } }); }); $(".dialog").on("click",".btnnoOk", function () { alert("not ok"); $(this).parents(".dialog").css("display", "none"); }); $("#delallpartdialog").on("click",".btnok", function () { alert("ok!"); });
4.效果圖
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JQuery EasyUI 對(duì)話框的使用方法
- jQuery Dialog 彈出層對(duì)話框插件
- 基于jQuery的彈出警告對(duì)話框美化插件(警告,確認(rèn)和提示)
- jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼
- jquery刪除提示框彈出是否刪除對(duì)話框
- 修改jquery里的dialog對(duì)話框插件為框架頁(iframe) 的方法
- Confirmer JQuery確認(rèn)對(duì)話框組件
- jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
- jQuery UI庫中dialog對(duì)話框功能使用全解析
- jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見使用問題解答
相關(guān)文章
Jquery Ajax的Get方式時(shí)需要注意URL地方
我們要時(shí)刻注意瀏覽器緩存, 當(dāng)使用GET方式時(shí)要添加時(shí)間戳參數(shù) (net Date()).getTime() 來保證每次發(fā)送的URL不同, 可以避免瀏覽器緩存.2011-04-04輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法實(shí)例
這篇文章主要介紹了輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法,實(shí)例分析了jquery遮罩層插件的定義、功能及使用方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07jQuery Validate表單驗(yàn)證插件 添加class屬性形式的校驗(yàn)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件,在class屬性中添加校驗(yàn)規(guī)則進(jìn)行簡(jiǎn)單的校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長(zhǎng),所以都會(huì)設(shè)置這么一個(gè)按鈕,利用這個(gè)按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。下面通過實(shí)例代碼給大家簡(jiǎn)單介紹一下吧2016-12-12jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件控制頁面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08用jquery ajax獲取網(wǎng)站Alexa排名的代碼
其實(shí)就是利用了jquery的ajax功能,獲取遠(yuǎn)程的xml文件,讀取指定內(nèi)容的代碼,對(duì)于學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的參考。2009-12-12使用jQuery Ajax 請(qǐng)求webservice來實(shí)現(xiàn)更簡(jiǎn)練的Ajax
以往我們?cè)谧鯽jax時(shí),都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個(gè)請(qǐng)求都要建一個(gè)這樣的文件,非常麻煩,下面我們甩掉ashx和asmx來使用jQuery Ajax 請(qǐng)求webservice來實(shí)現(xiàn)更簡(jiǎn)練的Ajax,需要的朋友參考下2016-08-08