Home/ Questions/Q 77469
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T20:50:07+00:00

I need to replace our Ajax Modal Popup controls with a JavaScript equivalent. We

  • 0

I need to replace our Ajax Modal Popup controls with a JavaScript equivalent. We use this as a simple context sensitive help type popup. I did a quick browse but didn’t see quite what I was looking for. I just need some text and a simple Close button/link, but I would like the page darkened below the popup, as it does with the Ajax modal control.

Can anyone suggest a nice JavaScript popup/help type solution that you’ve used?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I can provide you the code. Do your modifications as necessary, OK?

    Page JavaScript: 

    function myPop() {      this.square = null;     this.overdiv = null;      this.popOut = function(msgtxt) {         //filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;         this.overdiv = document.createElement('div');         this.overdiv.className = 'overdiv';          this.square = document.createElement('div');         this.square.className = 'square';         this.square.Code = this;         var msg = document.createElement('div');         msg.className = 'msg';         msg.innerHTML = msgtxt;         this.square.appendChild(msg);         var closebtn = document.createElement('button');         closebtn.onclick = function() {             this.parentNode.Code.popIn();         }         closebtn.innerHTML = 'Close';         this.square.appendChild(closebtn);          document.body.appendChild(this.overdiv);         document.body.appendChild(this.square);     }     this.popIn = function() {         if (this.square != null) {             document.body.removeChild(this.square);             this.square = null;         }         if (this.overdiv != null) {         document.body.removeChild(this.overdiv);         this.overdiv = null;         }      } }

    Now the HTML page, using the JavaScript file: 

    <html>    <head>     <script type='text/javascript' src='NAME OF THE PAGE!.js'></script>     <style>         div.overdiv { filter: alpha(opacity=75);                       -moz-opacity: .75;                       opacity: .75;                       background-color: #c0c0c0;                       position: absolute;                       top: 0px;                       left: 0px;                       width: 100%; height: 100%; }          div.square { position: absolute;                      top: 200px;                      left: 200px;                      background-color: Menu;                      border: #f9f9f9;                      height: 200px;                      width: 300px; }         div.square div.msg { color: #3e6bc2;                              font-size: 15px;                              padding: 15px; }     </style>   </head>   <body>     <div style='background-color: red; width: 200px; height: 300px;                 padding: 20px; margin: 20px;'></div>      <script type='text/javascript'>         var pop = new myPop();         pop.popOut('Jose leal');     </script>   </body> </html>

    Hope that this can help.

    • 0