0

リモート コンテンツを持つモデルによって呼び出された、リモート コンテンツを持つモーダルを開きたい (そして閉じたい!)。残念ながら、「内部」モーダルを閉じると、両方のモーダルが閉じられます。

したがって、私が実際に行うことは次のとおりです。

index.htmlファイルは次のようになります。

<div class="container">
    <h2>Modal example</h2>
        <a data-toggle="modal" href="#" data-target="#firstmodal"
            class="btn btn-primary btn-large">Launch modal</a>

    <div id="firstmodal" class="modal" tabindex="-1" style="display: none;" data-remote="/link/to/remote.html">
        <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal">×</button>
            <h3 id="firstModalLabel">First Modal</h3>
        </div>
        <div class="modal-body">Actual edit stuff</div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button> 
            <button id="save_btn" class="btn btn-primary">Save changes</button></div>
    </div>
</div>

呼び出されるremote.htmlは次のとおりです。

<p>
      <a data-toggle="modal" href="#" data-target="#secondmodal"
             class="btn btn-primary btn-large">Drück mich.</a>
</p>

<div id="secondmodal" data-target="/linkt/to/no_interaction.html" class="modal"     tabindex="-1" style="display: none; ">
    <div class="modal-header">
            <button class="close" type="button"    data-dismiss="modal">×</button>
                <h3 id="secondModalLabel">second header</h3>
    </div>
    <div class="modal-body">Actual edit stuff</div>
    <div class="modal-footer">`enter code here`
        <button class="btn" data-dismiss="modal">schließen</button> 
        <button id="save_btn" class="btn btn-primary">speichern</button
    </div>
    </div>
</div>

no_interaction.htmlは次のようになります。

<div><p>Hello</p></div>

再び私の問題: 2 番目 (内側) のモーダルを閉じると、最初のモーダルも閉じられます。2 番目のモーダルのすべてのコードが

<div class="modal-body">Actual edit stuff</div>

最初のモーダルの？回避策はありますか? それとも私のミスですか？;-)

前もって感謝します、

ピーター

4

2 に答える 2

0

モーダル内にモーダルを埋め込むと、自動化されたモーダル dissmis が無効になり、両方のモーダルが閉じられます。特定のモーダルを閉じるには、イベントを手動でバインドする必要があります。

ここではフィドルが機能しますが、モーダルをそのように埋め込むべきではありません-それは悪い設計です! http://jsfiddle.net/ZUVYU/3/

<a href="#myModal" role="button" class="btn" id="toggle">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header 1</h3>

</div>
<div class="modal-body">
    <p>One fine body…&lt;/p> <a href="#myModal2" role="button" class="btn" id="toggle2">Launch demo modal</a>

    <div
    id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close closemodal2" data-dismiss="" aria-hidden="true">×</button>
             <h3 id="myModalLabel">Modal header 2</h3>

        </div>
        <div class="modal-body">
            <p>One fine body 2...</p>
        </div>
        <div class="modal-footer">
            <button class="btn closemodal2" data-dismiss="" aria-hidden="true">Close</button>
        </div>
</div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

js: $('#myModal').modal({show:false}); $('#myModal2').modal({show:false});

$('#toggle').on('click', function () {
     $('#myModal').modal('show');    
});

$('#toggle2').on('click', function () {
     $('#myModal2').modal('show');
});

$('.closemodal2').on('click', function() {
    $('#myModal2').modal('hide');
});
于 2013-03-07T14:48:06.053 に答える
0

ブートストラップのサンプル コードを使用すると、すべて問題ないように見えます。jsfiddle でリモートを使用できませんでしたが、モーダルの動作には影響しません。

http://jsfiddle.net/ZUVYU/1/

<a href="#myModal" role="button" class="btn" id="" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header 1</h3>

</div>
<div class="modal-body">
    <p>One fine body…&lt;/p> <a href="#myModal2" role="button" class="btn" id=""
    data-toggle="modal">Launch demo modal</a>

</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="myModalLabel">Modal header 2</h3>

    </div>
    <div class="modal-body">
        <p>One fine body 2...</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>
于 2013-03-06T22:45:46.767 に答える