Javascript DOM Dialog Create

Description

Javascript DOM Dialog Create

View in separate window 


<!DOCTYPE html>

<html>
<head>
   <style>
      #Overlay//from   www  .  java2 s .  c  om
      {
         visibility: hidden;
         position: absolute;
         left: 90px;
         top: 120px;
         width:200px;
         height:90px;
         text-align:center;
         border: solid;
         background-color: lightgray;
      }
   </style>
   <title>Creating a Modal Dialog Box</title>
   <script language="JavaScript">
      function DlgShow(Message)
      {
         // Change the message.
         var Msg = document.getElementById("DlgContent");
         Msg.innerHTML = Message;
         
         // Display the dialog box.
         var Dlg = document.getElementById("Overlay");
         Dlg.style.visibility = "visible";
      }
      
      function DlgHide(Result)
      {
         // Disiplay the result on screen.
         var Output = document.getElementById("Result");
         Output.innerHTML = "You clicked: " + Result;
         
         // Hide the dialog box.
         var Dlg = document.getElementById("Overlay");
         Dlg.style.visibility = "hidden";
      }
   </script>
</head>

<body>
   <h1>Creating a Modal Dialog Box</h1>
   <input id="btnShow"
          type="button"
          value="Display the Dialog"
          onclick="DlgShow('Do you like oranges?')" />
   <p id="Result"></p>
   <div id="Overlay">
      <div>
         <p id="DlgContent">Content Goes Here</p>
         <input id="btnYes"
                type="button"
                value="Yes"
                onclick="DlgHide('Yes')" />
         <input id="btnNo"
                type="button"
                value="No"
                onclick="DlgHide('No')" />
      </div>
   </div>
</body>
</html>



PreviousNext

Related