What is the best way to display various dialogs based on the specific button that is clicked?

Question

What is the best way to display various dialogs based on the specific button that is clicked?

Starting a new project, I foresee the need for numerous dialog boxes and modals.

I've come up with some basic code that displays the dialog when a button is clicked and hides it when the cancel button is pressed.

However, I'm facing the issue of duplicating the code for every single dialog ID. Is there a way to streamline this process using a script that references a href value or assigns an ID to the a tag?

Alternatively, is there a more efficient method of accomplishing this task?

Below is my current code:

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);
});

View the example here: https://jsfiddle.net/susannalarsen/28t6t51x/

jquery html css modal-dialog

Answer 1

Answer №1

To implement data attributes with links, you can follow the code snippet below:

$(".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 in the HTML would look like this:

<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">

For a visual representation of this code, check out the JSFiddle link.

You could also utilize the href attribute in your implementation:

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


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

The corresponding HTML for this approach would be:

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

Answer 2

To implement data attributes with links, you can follow the code snippet below:

$(".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 in the HTML would look like this:

<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">

For a visual representation of this code, check out the JSFiddle link.

You could also utilize the href attribute in your implementation:

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


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

The corresponding HTML for this approach would be:

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

Answer 3

Answer №2

I made some changes to your code snippet in the fiddle. Now, each "a" element includes a class name of btn, and the id needs to match a data-content attribute on the corresponding dialog div. Check out the updated version here: https://jsfiddle.net/28t6t51x/2

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

Answer 4

I made some changes to your code snippet in the fiddle. Now, each "a" element includes a class name of btn, and the id needs to match a data-content attribute on the corresponding dialog div. Check out the updated version here: https://jsfiddle.net/28t6t51x/2

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

Answer 5

Answer №3

Yes, absolutely! You have the option to create a helper function that accepts an ID (example):

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

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

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

Alternatively, using a similar approach, you can utilize one dialog box and simply change the content dynamically based on the button clicked (example):

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

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

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

The complexity of your implementation will depend on the number of buttons, dialogs, or other elements that you expect to incorporate.

Answer 6

Yes, absolutely! You have the option to create a helper function that accepts an ID (example):

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

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

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

Alternatively, using a similar approach, you can utilize one dialog box and simply change the content dynamically based on the button clicked (example):

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

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

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

The complexity of your implementation will depend on the number of buttons, dialogs, or other elements that you expect to incorporate.

Answer 7

Answer №4

To display a dialog when an element is clicked, you can retrieve the id of the clicked element and then append the dialog.

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

To make it work, you need to update the id of the create tag to 'create-new'. Check out this example on jsfiddle for reference.

Answer 8

To display a dialog when an element is clicked, you can retrieve the id of the clicked element and then append the dialog.

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

To make it work, you need to update the id of the create tag to 'create-new'. Check out this example on jsfiddle for reference.

What is the best way to display various dialogs based on the specific button that is clicked?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to showcase the search outcomes of employee information stored in my text document using PHP?

Retrieve the post ID from the existing URL via AJAX in order to fetch data associated with that particular ID

Photo on vertical display

What is the method for defining a CSS property for the ::before pseudo element within an Angular component?

Trigger functions when the window is scrolled, resized, or when the document is fully loaded

What methods can I employ to utilize a JSON response generated by PHP within jQuery?

Struggling to make the Bootstrap 4 Datatables example work on my website

What is the best way to eliminate the blue color from a Boostrap 5.3 accordion item when it is opened?

What is the best way to incorporate HTML styling into a PHP email tutorial focused on Swift Mail?

The text-decoration is here to stay

How to Conceal the Search Bar in jQuery DataTables

Add the data object list to the serialized format

Using webpack to load the css dependency of a requirejs module

Integrating dual Google Maps onto a single HTML page

Issue with OnChange event in HTML and Adding Content with Jquery

Ways to adjust the size of the parent element based on the height of a specific element

Showing fetched data from Firebase in an Ionic 3 HTML file

The right padding on an HTML table is not functioning properly when the table width is larger than

How to align a div in the center of a cell with Bootstrap

Unraveling the Enigma of Event Handlers: Mastering the Organization of a Sprawling jQuery File within an AJAX