javascript - can we have a pop up without the use of alert or windows.alert -

ideally when click action item in table shows "show message" on clicking on need popup without use of window.alert or alert instead show pop based on website design

function showfailedwarning(){     dijit.byid('validationsform').clearmessages();     dijit.byid('validationsform').popup(alert("upload correct file ")); } 

method #1 - pure javascript

you can build own pop-up whatever design want. either hardcode elements in html , set display:none container in css, or dynamically append container.

note: why used innerhtml in place of appendchild().

live demo

html

<button id="error">click error</button> 

javascript

document.getelementbyid('error').onclick = function (event) {     event.preventdefault();      /*creating , appending element */      var element = '<div id="overlay" style="opacity:0"><div id="container">';     element += "<h1>title</h1><p>message</p>";     element += "</div></div>";     document.body.innerhtml += (element);     document.getelementbyid('overlay').style.display = "block";      /* fadein animation, sake of */     var fadein = setinterval(function () {         if (document.getelementbyid('overlay').style.opacity > 0.98) clearinterval(fadein);         var overlay = document.getelementbyid('overlay');         overlay.style.opacity = parsefloat(overlay.style.opacity, 10) + 0.05;         console.log(parsefloat(overlay.style.opacity, 10));      }, 50); }; 

css

#overlay {     position:absolute;     top:0;     left:0;     width:100%;     height:100%;     z-index:1000;     background-color: rgba(0, 0, 0, 0.5);     opacity:0;     display:none; } #container {     position:absolute;     top:30%;     left:50%;     margin-left:-200px;     width: 400px;     height:250px;     background-color:#111;     padding:5px;     border-radius:4px;     color:#fff; } 

---

---

---

method #2 - third-party libraries

you can use libraries such jquery ui achieve want:

live demo

html

<button id="error">click error</button> 

javascript/jquery

$('#error').click(function (event) {     event.preventdefault();     $('<div id="container"><h1>error</h1><p>message</p></div>').dialog({         title: "error"     }); });