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

Question

我尝试了 Eric martin modal 插件的简单 modal。 我遇到了一点困难。我在 Html 页面上做了一个模态，但是如果我想在一个 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。请参考插件的可定制选项。我很确定您可以将它们用于您的目的。