jQuery支持多次确认的点击弹出确认对话框
工具/原料
adobedreamweaver
方法/步骤
1、新建html文档。
2、书写hmtl代艨位雅剖码。<ulid="main"><liid=&鳎溻趄酃quot;onlyChoseAlert"><ahref="#">单次单选弹框</a></li><liid="dblChoseAlert"><ahref="#">单次双选弹框</a></li><liid="manyChoseAlert"><ahref="#">多次双选弹框</a></li><liid="manyAllChoseAlert"><ahref="#">多次双选弹框全关闭</a></li></ul>
3、书写css代码。<style> *{margin:0;padding:0;} body{background-color:#3A3A3A;} #main{position:absolute;width:200px;left:50%;margin-left:-100px;top:200px;text-align:center;} #mainli{list-style-type:none;margin-top:5px;} #mainlia{color:#fff;} #mainlia:hover{color:#99e;} #mainlia:active{color:#e99;}</style>
4、书写并添加js蜣贺鱿柢代码。<scriptsrc="js/jquery.min.js"></script><scripts鸡堕樱陨rc="js/simpleAlert.js"></script><script> $(function(){ $("#onlyChoseAlert").click(function(){ varonlyChoseAlert=simpleAlert({ "content":"按确定消失按确定消失!", "buttons":{ "确定":function(){ onlyChoseAlert.close(); } } }) }) $("#dblChoseAlert").click(function(){ vardblChoseAlert=simpleAlert({ "content":"按确定/取消消失!", "buttons":{ "确定":function(){ alert("你好"); dblChoseAlert.close(); }, "取消":function(){ dblChoseAlert.close(); } } }) }) //多次双选弹框 $("#manyChoseAlert").click(function(){ varmanyChoseAlert=simpleAlert({ "content":"按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键!", "buttons":{ "确定":function(){ varmanyChoseAlert2=simpleAlert({ "content":"再次确定!", "buttons":{ "确定":function(){ varmanyChoseAlert3=simpleAlert({ "content":"最后确定!", "buttons":{ "确定":function(){ manyChoseAlert3.close(); } } }) }, "取消":function(){ manyChoseAlert2.close(); } } }) }, "取消":function(){ manyChoseAlert.close(); } } }) }) //多次双选弹框全关闭 $("#manyAllChoseAlert").click(function(){ varmanyAllChoseAlert=simpleAlert({ "content":"按确定键!", "buttons":{ "确定":function(){ varmanyAllChoseAlert2=simpleAlert({ "content":"再次确定!", "buttons":{ "确定":function(){ varmanyAllChoseAlert3=simpleAlert({ "content":"最后确定－全关闭!", "closeAll":true, "buttons":{ "确定":function(){ manyAllChoseAlert3.close(); } } }) }, "取消":function(){ manyAllChoseAlert2.close(); } } }) }, "取消":function(){ manyAllChoseAlert.close(); } } }) }) })</script>
5、代码整体结构。
6、查看效果。
