2

Twitter-bootstrapを使用して、Webページに2つのモーダルダイアログがありますが、機能するのはそのうちの1つだけです。

コードは次のとおりです。

<a href="#format" role="button" class="btn btn-info" data-toggle="format">Phone and Email</a>
<div id="format" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="format" aria-hidden="true">
    <div class="modal-header">
    <!--This needs a fancy phone icon and so does the button.-->
    <img src="img/numberheader.png" alt="">
    </div>
    <div class="modal-body">
    <p>
    <h4>Office:</h4>
    123 4567<br>
    <h4>Programme Manager:</h4>
    765 4321<br>
    <hr>
    <img src="img/emailheader.png" alt="">
    <h4>Email us</h4>Iremovedthemailaddresses<br>
    <a href="Iremovedthemailaddresses" class="btn-primary btn-small">Click Here To Email Us</a>
    <br>
    </p>
    </div>
    <div class="modal-footer">
    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
    </div>
<a href="#myModal" role="button" class="btn btn-info" data-toggle="modal">Phone and Email</a>
<div id="myModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<!--This needs a fancy phone icon and so does the button.-->
<img src="img/numberheader.png" alt="">
</div>
<div class="modal-body">
<p>
<h4>Office:</h4>
123 4567<br>
<h4>Programme Manager:</h4>
765 4321<br>
<hr>
<img src="img/emailheader.png" alt="">
<h4>Email us</h4>Iremovedthemailaddresses<br>
<a href="Iremovedthemailaddresses" class="btn-primary btn-small">Click Here To Email Us</a>
<br>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

2つのモーダルの内容は、まだ意図されたものに分離されていません。これは、現時点での概念実証にすぎません（したがって、内容は無視してください）。

ただし、最初のものではなく、2番目のものに対してのみ機能します。両方のモーダルを機能させるにはどうすればよいですか？

4

1 に答える 1

2

アンカータグとモーダルIDが一意であることを確認してください。

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

デモ： http： //jsfiddle.net/uf2UR/

于 2013-02-14T19:34:17.183 に答える