New instance

tonelm54 used Ask the Experts™

on 2016-04-09

jQuery

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

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

New instance

Premium Content

Premium Content

Explore our Suite of Services