Heim >Web-Frontend >HTML-Tutorial >CSS模拟实现alert和confirm实现_html/css_WEB-ITnose
CSS模拟实现alert和confirm实现_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:211215Durchsuche
由于原生的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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：canvas-tangram.html_html/css_WEB-ITnoseNächster Artikel：为什么得不到想要的结果呢_html/css_WEB-ITnose