CSS模拟实现alert和confirm实现
来源:互联网 发布:会发光的自然植物知乎 编辑:程序博客网 时间:2024/05/22 02:38
由于原生的alert和confirm在不同手机上显示样式不一样,而且也难看。所以用css模拟了原生的alert和confirm实现。实现效果截图分别如下:
其中弹出框内的文字可以动态赋值。 具体代码如下:
<!DOCTYPE html><html><head><title>confirm和alert的demo</title><meta charset="UTF-8"><script src="jquery.min.js"></script><style type="text/css">/*w-error-popup-white*/.w-error-popup-white{ width: 100%; height: 100%; z-index: 999; position: fixed; left: 0; top:0;}.w-error-popup-white .w-error-back{ width: 100%; height: 100%; background-color: rgba(0,0,0,.8); position:fixed; z-index: 1000; left: 0; top:0;}.w-error-popup-white .w-error-inner{ background-color: #fff; width: 90%; top: 15%; left: 50%; margin-left: -45%; text-align: center; border-radius: 20px; padding: 0; z-index: 1001; position: relative;}.w-error-popup-white .w-error-inner h4{ font-size: 20px; color: #333; padding: 16px 0; margin: 0 32px; border-bottom: 1px solid #e5e9ec; font-weight: normal; }.w-error-popup-white .w-error-inner .w-error-content{ color: #333; font-size: 16px; line-height: 45px; padding: 32px; height: 270px; overflow-y:auto; overflow-x:hidden; text-align: left; }.w-close{ background: url(../images/result-error-x.png) no-repeat right 16px; float: right; right:18px; top:0; position:absolute; z-index: 999; width: 100px; height:85px; cursor:pointer; display: block; background-size:60%;}/*u-btn */.u-btn{ padding: 16px 80px; background-color: #92c153; border-bottom: 5px solid #7da646; border-radius: 8px; color: #fff; display: inline-block; vertical-align: middle;}.u-btn-red{ background-color: #ec7d69; border-color: #e95c44;}</style></head><body><input type="button" value="模拟confirm" id="confirmId" onclick="confirmClickMethed()"/><input type="button" value="模拟alert" id="alertId" onclick="alertClickMethed()"/> <!-- 所有页面都共享confirm提示框 --> <div id="w-error-popup-white" style="display: none;" class="w-error-popup-white"> <div class="w-error-back"></div> <div class="w-error-inner"> <div id="w-confirm-content" class="w-error-content" style="height: auto; font-size: 26px;"> 取消后不能恢复,确定取消么?</div> <div class="btn" style="padding: 1rem; text-align: right;"> <a class="u-btn u-btn-red" href="javascript:canclePopup();">取消</a> <a id="sure" class="u-btn" href="javascript:sure();">确定</a> </div> </div> </div> <!-- 所有页面都共享alert提示框 --> <div id="w-alert-popup-white" style="display: none;" class="w-error-popup-white"> <div class="w-error-back"></div> <div class="w-error-inner"> <div id="w-alert-content" class="w-error-content" style="height: auto; font-size: 26px;"> 这是提示内容 </div> <div class="btn" style="padding: 1rem; text-align: right;"> <a class="u-btn u-btn-red" href="javascript:alertHide();">确定</a> </div> </div> </div> <script type="text/javascript"> function sure(){ $("#w-error-popup-white").hide(); alert("确定"); }function canclePopup(){ $("#w-error-popup-white").hide();}function alertHide(){ $("#w-alert-popup-white").hide();}function confirmClickMethed(){ $("#w-confirm-content").html("这是一个confirm内容,取消还是确认呢?"); $("#w-error-popup-white").show();}function alertClickMethed(){ $("#w-alert-content").html("这是一个alert内容"); $("#w-alert-popup-white").show();}</script></body></html>
文件需要引入jquery。下载地址为:
链接: http://pan.baidu.com/s/1qWxOoC8 密码: w541
0 0
- CSS模拟实现alert和confirm实现
- javascript+div+css模拟alert效果和confirm效果
- 用JQuery UI dialog实现Alert和Confirm功能
- iOS Webview 实现修改javascript confirm 和 alert
- iOS Webview 实现修改javascript confirm 和 alert
- 用模态窗口 模拟 alert 和 confirm 对话框
- 模拟JavaScript中alert和confirm
- alert和confirm相关
- 自定义alert和confirm
- 重写alert和confirm
- jquery+artDialog也可以模拟实现confirm
- bootstrap 自定义alert 和 confirm
- HTML、CSS和JavaScript学习四(Window对象之alert、confirm、prompt、open、onload...)
- Jqueryalert和message、confirm的个性化实现
- [原创]使用自定义的alert和confirm
- confirm如何换行和alert如何换行
- jquery自定义对话框alert、confirm和prompt
- 学习alert()和confirm()的区别
- 原 异常解决WARNING: Could not open/create prefs root n... 发表于2年前(2013-08-14 14:39) 阅读(3632) | 评论(4) 4人
- #1082 : 然而沼跃鱼早就看穿了一切(AC版)
- python模版
- Linux系统下如何挂载FAT32的U盘
- HTTP:状态码304
- CSS模拟实现alert和confirm实现
- JavaWeb---文件读取/IO流
- 函数指针和函数
- Java的七大设计原则
- ViewPager 和 TabLayout实现Fragment分页
- 隐藏Android下的虚拟按键
- 手动更新配置gradl
- [leetcode 223] Rectangle Area
- 服务器重启导致mysql同步出错