Advertisemen
You might be asking yourself why would I want to create my own alert box, every browser provides pretty good alert box. Same like you I didn't have problem with default alert box until I was making mobile application.
For me, main reason was I didn't want domain name in alert box because It doesn't look like native app with that kind of alert box. There are other reasons as well but I am not going to talk about in this tutorial.
Ok let's have a look at how to build your own alert box.
Go ahead and create an empty html file in your project but make sure it has html tags. Now inside the body tag add button like this with on click function.
Next, inside the head tag create a script tag and create the function we declared inside the button.
Variables w and h get the width and height of browser which we will use later on. After that we create, div element with id "customAlert" and give this an innterHTML with some values like you can see in the picture above.
Now add the css properties to the div we created like in the picture. In the css property top, we have this h/2-150 that means half from the top of the browser and approximate height of div / 2 = 150 because we haven't defined the height value but in the case of left 150 is not a hunch value because we have defined the width of the alert box.
Ok moving on, create function dismissCusBox which we have declare inside ok button. take a look in the picture above.
Finally add some css, I am just going to add css in the same page but if you want you make it in separate page. Add the following css above the script tag.
Your full code should look like this :
Thanks
For me, main reason was I didn't want domain name in alert box because It doesn't look like native app with that kind of alert box. There are other reasons as well but I am not going to talk about in this tutorial.
Ok let's have a look at how to build your own alert box.
Go ahead and create an empty html file in your project but make sure it has html tags. Now inside the body tag add button like this with on click function.
Next, inside the head tag create a script tag and create the function we declared inside the button.
Variables w and h get the width and height of browser which we will use later on. After that we create, div element with id "customAlert" and give this an innterHTML with some values like you can see in the picture above.
Now add the css properties to the div we created like in the picture. In the css property top, we have this h/2-150 that means half from the top of the browser and approximate height of div / 2 = 150 because we haven't defined the height value but in the case of left 150 is not a hunch value because we have defined the width of the alert box.
Ok moving on, create function dismissCusBox which we have declare inside ok button. take a look in the picture above.
Finally add some css, I am just going to add css in the same page but if you want you make it in separate page. Add the following css above the script tag.
Your full code should look like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Alert Box</title>
<style>
#okBtn
{
width: 50px;
height: 20px;
cursor: pointer;
}
#bg
{
position: fixed;
top:0;
left:0;
background: rgba(0, 0, 0, 0.37);
width: 100%;
height: 100%;
}
</style>
<script>
function cusAlert(m)
{
var w = window.innerWidth;
var h = window.innerHeight;
var aDivAlrt = document.createElement("div");
aDivAlrt.id = "customAlert";
aDivAlrt.innerHTML = '<p>'+m+'</p>' +
'<hr>' +
'<center>' +
'<button id="okBtn"
onclick="dismissCusBox()">Ok</button>'+
'</center>';
aDivAlrt.style.position = "absolute";
aDivAlrt.style.width = 300+"px";
aDivAlrt.style.background = "#fff";
aDivAlrt.style.padding = 10+"px";
aDivAlrt.style.borderRadius = 10+"px";
aDivAlrt.style.top = h/2-150+"px";
aDivAlrt.style.left = w/2-150+"px";
var aDivAlrtBg = document.createElement("div");
aDivAlrtBg.innerHTML = '<divid="bg"></div>';
document.getElementsByTagName("body")[0]
.appendChild(aDivAlrtBg);
document.getElementsByTagName("body")[0]
.appendChild(aDivAlrt);
}
function dismissCusBox()
{
document.getElementById("customAlert").remove();
document.getElementById("bg").remove();
}
</script>
</head>
<body>
<buttononclick="cusAlert('This
is a custom box message')">Custom Alert Box</button>
</body>
</html>
Thanks
Advertisemen
Tidak ada komentar:
Posting Komentar