最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 21:26:37
文档

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

自编jQuery插件实现模拟alert和confirm_jquery:啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了。因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { G
推荐度:
导读自编jQuery插件实现模拟alert和confirm_jquery:啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了。因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { G
 啥也不说,先上图,有图有真相 :)

现在绝大多数网站都不用自带的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提示框


 
 
 

 
 
 

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

文档

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

自编jQuery插件实现模拟alert和confirm_jquery:啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了。因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { G
推荐度:
标签: 插件 alert jQuery
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top