jQuery simple multiple modals on one html page

Question

I tried the simple modal of Eric martin modal plugin. And I got a little difficulty. I did one modal on Html page but what if I want some more modals in one HTML page like I did the first one-just with different background and content?

HTML:

<div id='content'>

    <div id='basic-modal'>



 <a href='#' class='basic'>white whine</a>


 <div id="basic-modal-content">

 <p> text text text</p>
          </div>  
          </div>
          </div> 

jQuery:

jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal();


    return false;
});
});

Answer 1

It should be easy for you unless you are not opening them simultaneously. Because the plugin uses id for it's containers and some elements in plugins. And having same id in a page will create issues in your code.

Here is the demo : http://jsfiddle.net/lotusgodkk/GCu2D/226/

HTML:

<div id='basic-modal'>
    <input type='button' name='basic' value='Demo' class='basic' />
    <div id="basic-modal-content1">Dialog 1</div>
    <input type='button' name='basic' value='Demo' class='basic' />
    <div id="basic-modal-content2">Dialog 2</div>
    <input type='button' name='basic' value='Demo' class='basic' />
    <div id="basic-modal-content3">Dialog 3</div>
</div>

jQuery:

$(document).ready(function () {
    $('#basic-modal .basic').click(function (e) {
        $(this).next('div').modal();
        return false;
    });
});

Code is pretty much clear. For every dialog instance, there is a separate div element which contains separate html. As far as the background is concerned, you can do it by giving CSS styles to the dialog containers.

For CSS,

This plugin provides an option for containerId which can be used for assigning custom Id to the container. Also you can use same ID for different CSS.

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/227/

jQuery:

    $('#basic-modal .basic').click(function (e) {
    var c =  $(this).next('div');
    var id = c.attr('id')+'_c'; // create a custom Id.
    c.modal({
        containerId:id, 
    });
    return false;
});

CSS:

#basic-modal-content1_c{
    background-color:green;
}
#basic-modal-content2_c{
    background-color:red;
}
#basic-modal-content3_c{
    background-color:yellow;
}

In this way you can change the CSS. Please refer the customizable options of plugin. I am pretty sure you can use them for your purpose.