New instance

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 https://jsfiddle.net/mxnvhod0/

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

Thank you
tonelm54Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
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) {
    var
        method = this, // {}
        $overlay,
        $modal,
        $content,
        $close;

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

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

        $modal.css({
            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",
        "height":"100%",
        "width":"100%",
        "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
    //method.open = function(settings) {
        $content.empty().append(settings.content);

        $content.addClass("diaContent");

        $modal.css({
            width: settings.width || 'auto',
            height: settings.height || 'auto'
        });

        if (typeof settings.id !== 'undefined') {
            $modal.attr("id", settings.id);
        }


        method.center();
        $(window).bind('resize.modal', method.center);
        $('body').append($overlay, $modal);
        $close.click(function(e) {
            e.preventDefault();
            method.close();
        });
    //};

    // Close the modal
    method.close = function() {
        $modal.remove();
        $overlay.remove();
        $content.empty();
        $(window).unbind('resize.modal');
    };

    //return method;
};



$(document).ready(function () {
  $(document).on("click","#btnTest", function () {
    var tt1 = new modal({
      content: "<button id='btnTest2'>tt</button>",
      id:"diaTest",
      width:"500px",
      height:"300px"
    });
  });
  $(document).on("click","#btnTest2", function () {
    var tt2 = new modal({
      content: "hi2",
      id:"diaTest2",
      width:"100px",
      height:"100px"
    });
  });
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tonelm54Author Commented:
As always, thank you
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.