Twitterブートストラップモーダルを閉じる方法(最初の起動後)


91

私はまったくの初心者なので、Twitterブートストラップモーダルで何か(おそらく明白)を監視していると思います。私がやろうとしていることは、モーダルをモバイルでのみ起動できるようにすることです。これは、モーダルdivにクラス.visible-phoneを追加するとうまく機能します。ここまでは順調ですね。しかし、それを機能させたいので、Xボタンで閉じることができます。また、ボタンを機能させることができません。

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

HTMLの下部に、jquery.js(最初)、bootstrap.modal.js、bootstrap.transition.jsを配置します。実際には、すべてのブートストラップjsモジュール(インクルードを見逃さないようにするため)。私はjsの経験がありません。

私が本当に愚かなQを提起した場合、私を許してください。ログでこの特定の状況への答えを見つけることができませんでした。

回答:


219

$('#myModal').modal('hide') やるべきだ


はい、うまくいきました。しかし、「data-dismiss = "modal"」を使用しているアニメーションと同じものはありませんか?
クリス

間違いです。実際、そのときの問題を覚えていません。これを使用すると、問題なく動作します。TY!
クリス


6
これは奇妙$('#myModal').modal('show')ですが、私にとっては機能しますが、非表示は機能しません。
シャーロット

3
@LittleBigBotを$('#myModal').modal('toggle');代わりに使用してみてください
エドソン

27

ブートストラップモーダルダイアログを閉じるときに問題が発生しました。

$('#myModal').modal('show');

次のリンクでダイアログを開くこの問題を解決しました:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

初期化を忘れないでください:

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

また、閉じるボタンに次の属性を使用しました。

data-dismiss="modal" data-target="#myModal"

こんにちはartjom。Thnx!実行してフィードバックを提供します。モーダルを開くためにàボタンを使用していませんか?それが私が達成しようとしていることなので。最初はモーダルで起動し、モバイルでのみ起動して、場所へのクイックナビゲーションメニューを提供します(デスクトップでは直接関係ありません)。
Monique De Haas

はいdata-dismiss = "modal" data-target = "#myModal"は私の問題を解決しました!適切な!
Dheeraj Thedijje

13

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

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

JavaScriptコード

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

13

.modal( 'hide')は手動でモーダルを非表示にします。次のコードを使用してブートストラップモデルを閉じます

$('#myModal').modal('hide');

ここで作業用コードペンを見てください

または

ここで試してください


6

ボタンがdata-targetで閉じるべきモーダルを正確に指定してください。したがって、ボタンは次のようになります-

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

また、他のものを安全に削除できるように、bootstrap.modal.jsのみが必要です。

編集:これが機能しない場合は、visible-phoneクラスを削除し、電話ではなくPCブラウザーでテストします。これにより、JavaScriptエラーが発生しているかどうか、または互換性の問題などが表示されます。

編集:デモコード

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

こんにちは@Simon Cunningham Tnx回答者100万人 データターゲットを入れました。(残念ながら)動作しませんでした。その後、visible-phoneクラスを削除しました。違いはありませんでした。code <div class = "modal visible-phone" id = "myModal"> <div class = "modal-header"> <button class = "close" data-dismiss = "modal" data-target = "#myModal">× </ button> <h3>テキスト紹介<br>移動したい... </ h3> </ div> <div class = "modal-body"> <ul class = "nav"> <li> .. 。リンクのリストはこちら</ li> <li> link2 </ li> <li> link3 </ li> </ ul> </ div> </ div>code

<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>
Monique De Haas

テキストが乱雑になってすみません;)私はあなたのアドバイスに従いました。閉じるボタンに正確なデータターゲットを与えることは論理的に思えます。しかし、どういうわけか私はまだそれを機能させていません。目に見える電話を無効にしても。閉じるボタンには影響しないようです。(これはちょっといいことです)
Monique De Haas

モーダルを最初にどのように開いていますか?以下のように開いてみてください-<a data-toggle="modal" href="#myModal" class="btn">モーダルを開く</a>
Simon Cunningham

私は私の元の答えにいくつかの削減されたデモコードを追加しました。javascriptとcssファイルは私のテストプロジェクトにローカルです。それらを独自のリンクに置き換えてください。
Simon Cunningham

6

ドキュメンテーションによると、非表示/切り替えが機能するはずです。しかし、そうではありません。

これが私がやった方法です

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

1
これは実際には正しい「ブルートフォース」の答えです..しかし、私はアニメーションを得るためにそれを書き換えることをお勧め正しい:$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });
DerDu

3

これを試してください。

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

1

iPhoneまたはデスクトップでも同じ問題が発生し、閉じるボタンを押したときにダイアログを閉じることができませんでした。

<button>タグはクリック可能なボタンを定義し、次のように要素のtype属性を指定するために必要であることがわかりました。

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

BootStrap javascriptページで、ブートストラップモーダルのサンプルコードを確認して ください。


0

あなたは、いくつかのモーダルが同時に示されている場合は、属性を持つにおけるモーダルボタンのターゲット・モーダルを指定することができますdata-toggleし、data-target

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

モーダルコードの外のどこかに、別のトグルボタンがあります。

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

これらのボタンが非表示になっている間、ユーザーはモード内トグルボタンをクリックできません。"modal"属性のオプションで正しく機能しますdata-toggle。このスキームは自動的に機能します!


0

これは、ページを更新せずにモーダルを閉じるだけでなく、Enterキーを押すとモーダルを送信して更新せずに閉じるためのスニペットです

私のサイトで設定しました。複数のモーダルを使用でき、いくつかのモーダルは送信時にデータを処理しますが、一部は実行しません。私が行うことは、処理を行う各モーダルに一意のIDを作成することです。たとえば私のウェブページで:

HTML(モーダルフッター):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

ご覧のとおり、この送信は処理を実行するため、このモーダル用のjQueryがあります。ここで、このWebページ内に別のモーダルがあるが、処理は実行されず、一度に1つのモーダルが開いている$(document).ready()ため、すべてのページが取得するグローバルphp / jsスクリプトに別のモーダルを配置し、モーダルの閉じるボタンに次のクラスを割り当てたとします".modal-close"

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery(global.incを含む):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.