当前位置:Gxlcms > JavaScript > 自编jQuery插件实现模拟alert和confirm_jquery

自编jQuery插件实现模拟alert和confirm_jquery

时间:2021-07-01 10:21:17 帮助过:5人阅读

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

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

来看插件的实现代码吧:

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

titlex
msg

  mb_box为半透明遮罩层,将整个页面遮住,禁止操作;mb_con为提示框。之所以没把mb_con放在mb_box里面,是因为如果放里面的话,对mb_box设置的透明度会影响到mb_con,使mb_con也会变成透明的。之前也试过background-color:rgba(),可惜ie8及以下版本不支持。所以还是把mb_con拿到外面来了,通过设置z-index使其mb_box的上面。

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

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

Demo如下:



  模拟alert和confirm提示框


  
  
  

  

代码量并不多,如有什么疑问可以留言 :)

人气教程排行