一个 html 页面上的 jQuery 简单多模态

Question

我尝试了 Eric martin 模态插件的简单模态。我遇到了一点困难。我在 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;
});
});

Answer 1

除非您不同时打开它们，否则这对您来说应该很容易。因为插件使用 id 作为它的容器和插件中的一些元素。在页面中使用相同的 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 提供了一个选项，可用于将自定义 ID 分配给容器。您也可以为不同的 CSS 使用相同的 ID。

演示: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。请引用插件的自定义选项。我很确定您可以将它们用于您的目的。