4

この単純なモーダル フォームを Bootstap 3 で作成しましたが、ボタンをクリックしても表示されない理由がわかりません。

<div id="modal" class="modal hide fade in" style="display: none;">
    <div class="modal-header">  
        <a class="close" data-dismiss="modal">×</a>  
        <h3>Some title</h3>  
    </div>  
    <div class="modal-body">  
        <form id="modal-form" accept-charset="UTF-8" action="/mailing" data-remote="true" method="post">
            <label>Name:</label>
            <input type="text" class="span6">  

            <label>Email:</label>
            <input type="text" class="span6">  

            <label>Message:</label>
            <textarea type="text" class="span12" rows="4"></textarea>
        </form>
    </div> 
    <div class="modal-footer">
        <a href="#" class="btn btn-success">Send</a>  
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>  
    </div>  
</div>

これは、クリックしたときにこのモーダル ウィンドウを表示するボタンです。

<p class="text-center">
    <a data-toggle="modal" href="#modal" class="btn btn-success btn-lg">
        <span class="glyphicon glyphicon-envelope"></span>
                    Message me
    </a>
</p>

Web で見たサンプル コードと大差ありませんが、モーダル ウィンドウを表示することはできません。

なぜそれが機能しないのですか？

編集：

これは、Bootstrap JS ファイルを含める方法です。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
4

3 に答える 3

6

hideモーダル div からクラスを削除してみてください。
<div id="modal" class="modal fade in" style="display: none;">

于 2014-03-15T05:39:51.957 に答える
5

ブートストラップの js ファイルがありません。これらは js ファイルではなく、bootstrap の css ファイルです。body 要素内の終了タグ < /body> の直前にこれを含めます

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

css と js ファイルの両方が必要です

于 2013-10-21T13:14:04.457 に答える