当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

模拟alert和confirm

发布时间：2024/9/20 编程问答 35 豆豆

生活随笔收集整理的这篇文章主要介绍了模拟alert和confirm 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

啥也不说，先上图，有图有真相 :)

现在绝大多数网站都不用自带的alert和confirm了，因为界面太生硬了。因此这个插件就这样产生了...

来看插件的实现代码吧：

Html代码结构如下，js里面拼接的不直观，给出如下：

<div id="mb_box"></div> <div id="mb_con"><span id="mb_tit">title</span><a id="mb_ico">x</a><div id="mb_msg">msg</div><div id="mb_btnbox"><input id="mb_btn_ok" type="button" value="确定" /><input id="mb_btn_no" type="button" value="取消" /></div> </div>

　　mb_box为半透明遮罩层，将整个页面遮住，禁止操作；mb_con为提示框。之所以没把mb_con放在mb_box里面，是因为如果放里面的话，对mb_box设置的透明度会影响到mb_con，使mb_con也会变成透明的。之前也试过 font-family: Verdana, Arial, Helvetica, sans-serif;">

　　为了使插件使用方便，特意的没有用到图片，全是通过css来控制界面效果，使用时，引用一个js文件就可以了。css样式在js中写死了，这点可能不太灵活，但使用却很方便如果你对界面样式不满意或者与你网站的色彩风格不一致，那只能自行修改了。

　　由于弹出层(div)无法做到像原始的alert和confirm那样做到页面阻塞效果，因此只能通过回调函数来进行模拟。也因为这个原因，后台数据操作只能通过回调函数配合ajax来完成的。

Demo如下：

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>模拟alert和confirm提示框</title> </head> <body><input id="add" type="button" value="添加" /><input id="delete" type="button" value="删除" /><input id="update" type="button" value="修改" /><script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script><script src="../js/jquery.similar.msgbox.js" type="text/javascript"></script><script type="text/javascript">$("#add").bind("click", function () {$.MsgBox.Alert("消息", "哈哈，添加成功！");});//回调函数可以直接写方法function(){}$("#delete").bind("click", function () {$.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });});function test() {alert("你点击了确定,进行了修改");}//也可以传方法名 test$("#update").bind("click", function () {$.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);});//当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层
　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); });
</script> </body> </html> 与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是生活随笔为你收集整理的模拟alert和confirm的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。