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>

同じページで 2 番目のモーダル ボックスを呼び出す方法がわかりません。私はこれが初心者の質問であることを知っていますが、それは私を混乱させています。

ありがとう！

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 に答える