How do you bring up different dialogs depending on what button is pressed

Question

I am starting a project and I envision needing lots and lots of dialogs/modals.

I came up with some very rudimentary code that just basically shows the dialog when the button is pressed and then hides it when the cancel button is pressed.

The only problem I have now is that I can continue with this method although it would mean duplicating the same bit of code over and over with the ID of every single dialog.

Is there a way of just having one bit of script that maybe takes the a href value? or some way I can put an id on the a tag and that will bring up the relevant popup with the same ID?

Or maybe a cleaner and more efficient way of doing this?

Here is the code I am using:

HTML:

<a id="create">New</a>

<a id="edit">Edit</a>



<div class="overlay"></div>


<div class="dialog" id="create-new-dialog">
    <header>
        <h1>Create New</h1>
    </header>

    <div class="dialog-content">
        <p>I am some content info</p>
    </div>

    <footer>
        <div class="inner-container">
            <p></p>
            <a id="exit" class="btn-dark-outline dialog-btn cancel">Cancel</a>
        </div>
    </footer>
</div>


<div class="dialog" id="edit-dialog">
    <header>
        <h1>Edit</h1>
    </header>

    <div class="dialog-content">
        <p>I am some content info</p>
    </div>

    <footer>
        <div class="inner-container">
            <p></p>
            <a id="exit" class="btn-dark-outline dialog-btn cancel">Cancel</a>

        </div>
    </footer>
</div>

CSS:

a {
    background:lightpink;
    padding:20px;
    cursor:pointer;
}

.overlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:black;
    display:none;
    opacity:0.5;
}
.dialog {
    background:green;
    position:fixed;
    width:50%;
    margin-left:25%;
    border:1px solid #000000;
    z-index:999999;
    display:none;
    top:25%;
}
.dialog header {
    min-height:50px;
    background-color:#e9e9e9;
    text-align:center;
    border-bottom:1px solid #c4c4c4;
}
.dialog header h1 {
    margin:0;
    font-weight:300;
    font-size:22px;
    padding-top:10px;
}
.dialog .dialog-content {
    background-color:#f7f7f7;
    min-height:200px;
    padding:20px;
    margin:0;
}
.dialog footer {
    position:absolute;
    bottom:0;
    background-color:#ececec;
    width:100%;
    border-top:1px solid #acacac;
}
.dialog footer .inner-container {
    padding:10px;
    text-align:right;
}
.dialog footer .inner-container p {
    float:left;
    width:300px;
    text-align:left;
    margin:0;
}
footer .dialog-btn {
    background:#ffffff !important;
    color:#000000 !important;
    padding:13px;
    display:inline-block;
}

SCRIPT:

$(".cancel").click(function(){
   $('.dialog').stop().fadeOut(200);
   $('.overlay').hide();
});


$("#create").click(function(){
   $('#create-new-dialog').stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

$("#edit").click(function(){
   $('#edit-dialog').stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

Here is the example I have been working on: https://jsfiddle.net/susannalarsen/28t6t51x/

Answer 1

You could use data attributes in the links:

$(".cancel").click(function(){
   $('.dialog').stop().fadeOut(200);
   $('.overlay').hide();
});


$(".modalTrigger").click(function(){
    var myModal = $(this).attr("data-modal");
    $('#' + myModal).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

the links:

<a class="modalTrigger" data-modal="dialog1">New</a>

<a class="modalTrigger" data-modal="dialog2">Edit</a>

<div class="dialog" id="dialog1">

<div class="dialog" id="dialog2">

And a fiddle

You can also like you said use the href attribute:

$(".cancel").click(function(){
   $('.dialog').stop().fadeOut(200);
   $('.overlay').hide();
});


$(".modalTrigger").click(function(){
    var myModal = $(this).attr("href");
    $(myModal).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

html:

<a class="modalTrigger" href="#dialog1">New</a>
<a class="modalTrigger" href="#dialog2">Edit</a>

Answer 2

You could grab the element clicked id and append dialog

$("a:not(#exit)").click(function(){
    var butId=$(this).attr('id');
    var modType=butId+"-dialog";
   $('#'+modType).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

You would have to change the id of create tag to create-new, see https://jsfiddle.net/depperm/1e2qxu2b/

Answer 3

Sure thing -- you can create a helper function that takes an id (fiddle):

function showDialog(dialogId){
   $('#' + dialogId).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
}

$("#create").click(function(){
   showDialog('create-new-dialog');
});

$("#edit").click(function(){
   showDialog('edit-dialog');
});

Or, via a similar mechanism, have one dialog and have the click handlers change the text inside it (fiddle):

function showDialog(text){
   $('#content p').text(text);
   $('#my-dialog').stop().fadeIn(300);
   $('.overlay').fadeIn(300);
}

$("#create").click(function(){
   showDialog('foo');
});

$("#edit").click(function(){
   showDialog('bar');
});

How complicated you want to get will be proportional to how many buttons/dialogs/etc. you foresee yourself having.

Answer 4

I modified your fiddle a bit. Each "a" has a class called btn and the id must match an attribute called data-content on the correlating dialog div. https://jsfiddle.net/28t6t51x/1

$(".btn").click(function () {
var a = $(this).attr("id");
$("div.dialog").each(function () {
    if ($(this).attr("data-content") === a) {
        $(this).stop().fadeIn(300);
        $('.overlay').fadeIn(300);
    }
});