<html>
<head></head>
<script>
function showAlert(message) {
document.getElementById("message").innerText = message;
document.getElementById("messageHolder").style.display = "block";
}
function hideAlert() {
document.getElementById("messageHolder").style.display = "none";
}
</script>
<body>
<div id="messageHolder" style="position:absolute; display:none; top:50%; left:50%; width:200px; height:100px; background-color:red; border:1px solid blue;">
<div id="message"></div>
<input type=button onclick="hideAlert();" value="ok" style="position:absolute; left:50%; bottom:0">
</div>
<p style="margin-top: 0" align="left">
<input id="inputText" type="text" value="Hello World!">
<input type=button onclick="showAlert(document.getElementById('inputText').value);" value="Show alert!" >
</p>
<p style="margin-top: 0" align="left">
  Some content
</p>
</body>
</html>
browser JS alerts.iok | 10K |
It looks like you're new here. If you want to get involved, click one of these buttons!