How to code a JavaScript modal popup (to replace Ajax)?

by

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="https://stackoverflow.com/questions/288867/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.

More Related Contents:

  1. Preserve browser window aspect ratio while shrinking [closed]
  2. Remove element from JS injected HTML
  3. Format number to always show 2 decimal places
  4. Is it bad practice to have a constructor function return a Promise?
  5. how to get GET and POST variables with JQuery?
  6. Equivalent of String.format in jQuery
  7. Print content of JavaScript object? [duplicate]
  8. How do I convert an integer to binary in JavaScript?
  9. How to draw an inline svg (in DOM) to a canvas?
  10. Check if one date is between two dates
  11. How to rotate a 3D object on axis three.js?
  12. How to get browser width using JavaScript code?
  13. Get computed font size for DOM element in JS
  14. TypeError: firebase.storage is not a function
  15. How to break line in JavaScript?
  16. Open multiple links in Chrome at once as new tabs
  17. Javascript Bring window to front if already open in window.open?
  18. Angular 2 typescript invoke javascript function
  19. What is the “debounce” function in JavaScript?
  20. How to disable submit button once it has been clicked?
  21. How to print React component on click of a button?
  22. Group by and calculate mean / average of properties in a Javascript array
  23. How to correctly use axios params with arrays
  24. HTML5 video javascript controls – restart video
  25. Is there a limit on the size of a string in JSON with Node.js?
  26. Reload the site when reached via browsers back button
  27. gulp babel, exports is not defined
  28. Print / display a JavaScript variable’s name instead of it’s value
  29. How do I pass multiple attributes into an Angular.js attribute directive?
  30. How to count the number of lines of a string in javascript

Leave a Comment