zoukankan      html  css  js  c++  java
  • 自定义alert窗口样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		body{background:blue}
    		.shield{position: absolute;left:0;top:0;100%;background:rgba(255,255,255,.4);text-align:center;z-index:25px;filter:alpha(opacity=50);}
    		.fram{position:absolute;left:50%;top:50%;margin-left:-225px;margin-top:-75px;450px;height:150px;
    			background: #ff0000;text-align: center;line-height: 150px;z-index: 300}
    	</style>
    </head>
    <body>
    	<script type="text/javascript">
    		window.alert = function(str){ 
    			//创建一个div用来遮盖整个body
    			var shield = document.createElement("DIV"); 
    			shield.id = "shield"; 
    			shield.setAttribute("class","shield");
    			shield.style.height = document.body.scrollHeight+"px"; 
    			//创建一个div放置alert内容
    			var alertFram = document.createElement("DIV"); 
    			alertFram.id="alertFram"; 
    			alertFram.setAttribute("class","fram");
    			strHtml = "<ul style="list-style:none;margin:0px;padding:0px;100%">
    "; 
    			strHtml += " <li style="background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;">[自定义提示]</li>
    "; 
    			strHtml += " <li style="background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;">"+str+"</li>
    "; 
    			strHtml += " <li style="background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;"><input type="button" value="确 定" onclick="doOk()" /></li>
    "; 
    			strHtml += "</ul>
    "; 
    			alertFram.innerHTML = strHtml; 
    			document.body.appendChild(alertFram); 
    			document.body.appendChild(shield); 
    			this.doOk = function(){ 
    				alertFram.style.display = "none"; 
    				shield.style.display = "none"; 
    			} 
    			alertFram.focus(); 
    			document.body.onselectstart = function(){return false;}; 
    		} 
    			alert("10");
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    WebSocket
    使用fiddler将网站上的css js重定向至本地文件
    chrome浏览器调试线上文件映射本地文件
    xul 创建一个按钮
    模板小程序】求小于等于N范围内的质数
    哈希-------开放寻址法-------暴雪哈希
    建造者模式(build pattern)-------创造型模式
    抽象工厂模式(abstract factory pattern)------创造型模式
    工厂模式(factory pattern) ------创造型模式
    文件名中含有连续字符abc,相应文件中也含有字符串abc
  • 原文地址:https://www.cnblogs.com/yanxinhua/p/6025441.html
Copyright © 2011-2022 走看看