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。请参考插件的可自定义选项。我很确定你可以将它们用于你的目的。

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

1 个答案: