jQuery простые несколько модальных окон на одной HTML-странице

Это должно быть легко для вас, если вы не открываете их одновременно. Потому что плагин использует id для своих контейнеров и некоторых элементов в плагинах. И наличие того же идентификатора на странице создаст проблемы в вашем коде.

Вот демонстрация: 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;
    });
});

Код почти ясен. Для каждого экземпляра диалога есть отдельный элемент div, который содержит отдельный html. Что касается фона, вы можете сделать это, задав стили CSS для контейнеров диалогов.

Для CSS,

Этот плагин предоставляет опцию для containerId, которую можно использовать для назначения пользовательского идентификатора контейнеру. Также вы можете использовать один и тот же идентификатор для разных CSS.

Демонстрация: 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;
}

Таким образом, вы можете изменить CSS. Пожалуйста, обратитесь к настраиваемым параметрам плагина. Я уверен, что вы можете использовать их в своих целях.