一个用 CSS3 样式加上 JS 实现了 alert 和 confirm的效果
2011-12-28 16:53
806 查看
1、注意该案例不支持IE6,最后用支持CSS3 样式的浏览器查看,可以在iframe框架用,可以遮住整个框架
2、alert 弹出框效果图
3、confirm 弹出框效果图
4、如果用这框架里面,必须在框架里导入3个文件一个jquery里的包,一个是实现效果的Js文件,还有个是样式文件
在框架里的页面需要这样调用 (测试页面为 Test.aspx)
5、不在框架里应用 也要导入上面3个文件 用法如下(测试页面:Default3.aspx)
6、源码下载
2、alert 弹出框效果图
3、confirm 弹出框效果图
4、如果用这框架里面,必须在框架里导入3个文件一个jquery里的包,一个是实现效果的Js文件,还有个是样式文件
在框架里的页面需要这样调用 (测试页面为 Test.aspx)
<title>iframe里的页面</title> <script type="text/javascript"> function showClick() { parent.Message.config("config 弹出框测试,是否删除?", function (f) { if (f) { parent.Message.alter("点击Ok按钮"); } else { parent.Message.alter("点击Cannel按钮"); } }); } function showClick2() { parent.Message.alter("alert 弹出框测试"); } </script> </head> <body> alert弹出框: <input type="button" value="alert" onclick="showClick2()" /><br />
confirm 弹出框:<input type="button" value="config" onclick="showClick()" /><br /> </body> </html>
5、不在框架里应用 也要导入上面3个文件 用法如下(测试页面:Default3.aspx)
<title>不知 iframe 弹出框</title> <link href="LayPannel/Default/LayStyle.css" rel="stylesheet" type="text/css" /> <script src="LayPannel/jquery-1.7.min.js" type="text/javascript"></script> <script src="LayPannel/LayPannelJs.js" type="text/javascript"></script> <script type="text/javascript"> function showClick() { Message.config("config 弹出框测试,是否删除?", function (f) { if (f) { Message.alter("点击Ok按钮"); } else { Message.alter("点击Cannel按钮"); } }); } function showClick2() { Message.alter("alert 弹出框测试"); } </script> </head> <body> alert弹出框: <input type="button" value="alert" onclick="showClick2()" /><br /> config弹出框:<input type="button" value="config" onclick="showClick()" /><br /> </body> </html>
6、源码下载
相关文章推荐
- 一个不陌生的JS效果-marquee,用css3来实现
- 美化js系统函数alert,confirm,prompt,并实现lightbox效果
- 美化js系统函数alert,confirm,prompt,并实现lightbox效果
- 一个不陌生的JS效果-marquee,用css3来实现
- 基于JS实现简单的样式切换效果代码
- JS代码中加上alert才能正常显示效果
- 用html5 js实现点击一个按钮达到浏览器全屏效果
- JS与CSS3实现图片响应鼠标移动放大效果示例
- 实现js的类似alert效果的函数
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
- 让CSS3给你的文字加上边框宽度,并实现镂空效果
- js通过更改按钮的显示样式实现按钮的滑动效果
- js写一个弹出层并锁屏效果实现代码
- js实现一个可以兼容PC端和移动端的div拖动效果
- 纯CSS3实现多种不同的等待效果(无js/jquery/无图片)
- 分享一个通过JS、CSS3滚动渐变的效果
- 3月题外:关于JS实现图片缩略图效果的一个小问题
- css3和jQuery实现一个简单的标签页效果
- 利用JS和css3实现动画效果替代js的时间事件