Блог

Я попробовал простой модальный плагин Eric martin modal. И у меня возникла небольшая трудность. Я создал один модал на HTML-странице, но что, если я хочу, чтобы на одной HTML-странице было больше модалов, как на первой, только с другим фоном и содержимым?

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

Это должно быть легко для вас, если только вы не открываете их одновременно. Потому что плагин использует 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;
    });
});
  

Код в значительной степени понятен. Для каждого экземпляра dialog существует отдельный элемент 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. Пожалуйста, ознакомьтесь с настраиваемыми параметрами плагина. Я почти уверен, что вы можете использовать их для своих целей.