Created
February 29, 2016 06:56
-
-
Save yehchge/eeb71c9a1ee60be81b2c to your computer and use it in GitHub Desktop.
自訂Alert視窗
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<style> | |
#dialogoverlay{ | |
display: none; | |
opacity: .8; | |
position: fixed; | |
top: 0px; | |
left: 0px; | |
background: #FFF; | |
width: 100%; | |
z-index: 10; | |
} | |
#dialogbox{ | |
display: none; | |
position: fixed; | |
background: #000; | |
border-radius:7px; | |
width:550px; | |
z-index: 10; | |
} | |
#dialogbox > div{ background:#FFF; margin:8px; } | |
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; } | |
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; } | |
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; } | |
</style> | |
<script> | |
function CustomAlert(){ | |
this.render = function(dialog){ | |
var winW = window.innerWidth; | |
var winH = window.innerHeight; | |
var dialogoverlay = document.getElementById('dialogoverlay'); | |
var dialogbox = document.getElementById('dialogbox'); | |
dialogoverlay.style.display = "block"; | |
dialogoverlay.style.height = winH+"px"; | |
dialogbox.style.left = (winW/2) - (550 * .5)+"px"; | |
dialogbox.style.top = "100px"; | |
dialogbox.style.display = "block"; | |
document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message"; | |
document.getElementById('dialogboxbody').innerHTML = dialog; | |
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>'; | |
} | |
this.ok = function(){ | |
document.getElementById('dialogbox').style.display = "none"; | |
document.getElementById('dialogoverlay').style.display = "none"; | |
} | |
} | |
var Alert = new CustomAlert(); | |
</script> | |
</head> | |
<body> | |
<div id="dialogoverlay"></div> | |
<div id="dialogbox"> | |
<div> | |
<div id="dialogboxhead"></div> | |
<div id="dialogboxbody"></div> | |
<div id="dialogboxfoot"></div> | |
</div> | |
</div> | |
<h1>My web document content ...</h1> | |
<h2>My web document content ...</h2> | |
<button onclick="alert('You look very pretty today.')">Default Alert</button> | |
<button onclick="Alert.render('You look very pretty today.')">Custom Alert</button> | |
<button onclick="Alert.render('And you also smell very nice.')">Custom Alert 2</button> | |
<h3>My web document content ...</h3> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment