0

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

我在我正在构建的网站上做了同样的事情。我只是为每个模态创建了不同的内容，并给每个模态一个唯一的 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>

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

谢谢！

4

1 回答 1

0

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

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});
});
于 2013-02-17T16:47:58.260 回答