New instance

tonelm54 used Ask the Experts™
Again, with a lot of help from experts on experts-exchange Ive been trying to figure out getting my dialgue working. And I cannot figure out what Im doing wrong. Im sorry to keep asking questions on this, but its well out of my league at the moment :-(

What I thought I could is create a new instance onto of each other, but it doesnt seem to create a new instance, or it does create a new instance but doesnt keep the current in the background.

Ive uploaded it to jsfiddle in the hope someone could help, please :-S

Can anyone help, hopefully it will be the last question :-S

Thank you
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Engineer
In this situation I feel it's easiest to change the structure of the object creation: just call the modal function to create a new popup instead of relying on the IIFE construct. This gives you an easy way to make more than 1. You might want to use a more complex design pattern but since the duplicate content is pretty limited (the center and close functions) I guess it would be overkill.

Try this, updated jsFiddle:
var modal = function(settings) {
        method = this, // {}

    // Center the modal in the viewport = function() {
        var top, left;

        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

            top: top + $(window).scrollTop(),
            left: left + $(window).scrollLeft()

    // Generate the HTML and add it to the document
    $overlay = $('<div></div>').css({
        "position": "fixed",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "background": "#000",
        "opacity": "0.5",
        "cursor": "wait",
        "filter": "alpha(opacity=50)"
    $modal = $('<div></div>').css({
        "position": "absolute",
        "background": "rgba(0,0,0,0.2)",
        "border-radius": "14px"
    $content = $('<div></div>').css({
        "border-radius": "8px",
        "background": "#fff",
        "padding": "20px",
        "box-sizing": "border-box"
    $close = $('<a href="#"></a>').css({
        "position": "absolute",
        "background": "url(images/closeIcon.png) 0 0 no-repeat",
        "background-color": "blue",
        "width": "24px",
        "height": "27px",
        "display": "block",
        "text-indent": "-9999px",
        "top": "0px",
        "right": "0px"

    $modal.append($content, $close);

    // Open the modal
    // = function(settings) {


            width: settings.width || 'auto',
            height: settings.height || 'auto'

        if (typeof !== 'undefined') {
        $('body').append($overlay, $modal);
        $ {

    // Close the modal
    method.close = function() {

    //return method;

$(document).ready(function () {
  $(document).on("click","#btnTest", function () {
    var tt1 = new modal({
      content: "<button id='btnTest2'>tt</button>",
  $(document).on("click","#btnTest2", function () {
    var tt2 = new modal({
      content: "hi2",

Open in new window


As always, thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial