3

特定のボタンをクリックしたときにのみモーダルを表示したい。

現時点では、ページをロードするたびにモーダルが表示されます。

誰かが私がひどく間違っているところを教えてもらえますか?

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


                <div class="modal" id="myModal" 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</h3>
                    </div>
                    <div class="modal-body">
                        <p>One fine body…&lt;/p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                        <button class="btn btn-primary">Save changes</button>
                    </div>
                </div>

ASP.NET MVC 3 を使用しています

編集: Javascriptとして次のものしかありません:

 <script>
   $('#myModal').on('show', function() {

   });
 </script>

これらは、CSS と JS への私の参照です。

    <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
 <script src=@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js") type="text/javascript"> </script>
    <script src=@Url.Content("../../Content/lib/bootstrap/js/bootstrap.min.js") type="text/javascript"></script>
    <link href=@Url.Content("/Content/lib/bootstrap/css/bootstrap.min.css") rel="stylesheet" type="text/css" />
    <link href=@Url.Content("/Content/lib/bootstrap/css/bootstrap-responsive.min.css") rel="stylesheet" type="text/css" />
    <link href=@Url.Content("../../Content/lib/bootstrap/css/bootstrap-combobox.css") rel="stylesheet" type="text/css" />
    </head>
4

6 に答える 6

4

.hideクラスをモーダルに追加します。

<div class="modal hide fade">
    ...
</div>
于 2012-09-21T14:12:31.420 に答える
2

ページの読み込み時にモーダルを表示したくない場合は、JavaScript を使用する必要はありません。以下のコードを使用して、Bootstrap で単純なモーダルを作成します。 

   <!-- Button trigger modal -->
   <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch demo modal
   </button>

   <!-- Modal -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
           <h1>Hello World!</h1>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
于 2014-01-21T09:50:14.227 に答える
1

モーダルを機能させるには、以下を含める必要があります。

  • jquery
  • ブートストラップ-min.js

Bootstrap は、モーダルのカスタム属性を使用して、javascript 機能を見つけて適用します。バインディングを自分で記述する必要はありません。

于 2012-09-21T10:05:47.823 に答える
-1

モーダルコードを起動するボタン

<div class="modal hide" id="myModal"> モーダル コードを非表示

あなたのモーダルコードはこちら*モーダルのヘッダー、ボディ、フッターなど

</div>
于 2012-10-14T02:00:13.057 に答える
-2

Bootstrap モーダルは Javascript でのみ機能します。Bootsrap Javascript がない場合は、モーダル div を非表示にする Javascript であるため、モーダルが表示されます。

ブートストラップ JavaScript を含めて確認してください。

于 2012-09-21T09:39:33.630 に答える