Question

所以我已经看过几次问这个问题，而埃里克·马丁回答了这个问题：

我在我正在建设的网站上做了同样的事情。我刚为每个模态创建了不同的内容，并为每个模态分配了一个唯一的ID。所以我的内容看起来像是：

<a id='help'>HELP CONTENT</a>
<a id='about'>ABOUT CONTENT</a>
<a id='options'>OPTIONS CONTENT</a>

<div id='modal_help'>HELP CONTENT</div>
<div id='modal_about'>ABOUT CONTENT</div>
<div id='modal_options'>OPTIONS CONTENT</div>

然后在我的JS中，我有：

$('a').click(function (e) {
    e.preventDefault();

    $('#modal_' + this.id).modal({OPTIONS});
});

希望有所帮助。

所以，看一下模态示例演示：

<div id='logo'>
        <h1>Simple<span>Modal</span></h1>
        <span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
    </div>
    <div id='content'>
        <div id='osx-modal'>
            <h3>OSX Style Modal Dialog</h3>
            <p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
            <p>Inspired by <a href="http://okonet.ru/projects/modalbox/">ModalBox</a>, an OSX style dialog built with <a href="http://www.prototypejs.org/ ">prototype</a>.</p>
            <input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
        </div>

        <!-- modal content -->
        <div id="osx-modal-content">
            <div id="osx-modal-title">OSX Style Modal Dialog</div>
            <div class="close"><a href="#" class="simplemodal-close">x</a></div>
            <div id="osx-modal-data">
                <h2>Hello! I'm SimpleModal!</h2>
                <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
                <p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
                <p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
                <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
            </div>
        </div>
    </div>

我不明白如何在同一页面上调用第二个模态框。我知道这是一个新手问题，但这让我感到困惑。

谢谢！

Answer 1

有一个真正的例子（简化）你想要做的事情会更有帮助。但是，使用您提供的演示代码，您可以执行以下操作：

HTML：

<div id='logo'>
    <h1>Simple<span>Modal</span></h1>
    <span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
    <div id='osx-modal'>
        <h3>OSX Style Modal Dialog</h3>
        <p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
        <p>Inspired by <a href="http://okonet.ru/projects/modalbox/">ModalBox</a>, an OSX style dialog built with <a href="http://www.prototypejs.org/ ">prototype</a>.</p>
        <!-- added id -->
        <a href='#' id='osx-modal' class='osx'>OSX Modal</a>
        <!-- new link for second modal -->
        <a href='#' id='second-modal' class='osx'>Second Modal</a>
    </div>

    <!-- modal content -->
    <div id="osx-modal-content">
        <div id="osx-modal-title">OSX Style Modal Dialog</div>
        <div class="close"><a href="#" class="simplemodal-close">x</a></div>
        <div id="osx-modal-data">
            <h2>Hello! I'm SimpleModal!</h2>
            <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
            <p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
            <p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
            <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
        </div>
    </div>

    <!-- content for second modal -->
    <div id="second-modal-content">
        contents of second modal
    </div>
</div>

JavaScript的：

$('a.osx').click(function (e) {
    e.preventDefault();

    $('#' + this.id + '-content').modal({OPTIONS});
});

多个simplemodal盒子

1 个答案: