web-dev-qa-db-ja.com

Bootstrap Modalが外側をクリックしたりエスケープを押したときに消えないようにしますか？

私はTwitter Bootstrapモーダルをウィザードウィンドウとして使用していますが、モーダルの外側をクリックしたとき、またはEscキーを押したときにユーザーがウィンドウを閉じないようにしたいと考えています。代わりに、ユーザーが終了ボタンを押したときに閉じられるようにします。どうすればこのシナリオを達成できますか？

htmltwitter-bootstrapmodal-dialog
387
Ehsan Zargar Ershadi

JavaScriptを使用している場合：

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

そしてHTMLでは：

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
739
Ehsan Zargar Ershadi

あなたのdiv modalでdata-backdrop="static"をクリックしてdata-keyboard="false"をEscにします。

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
217
CesarMiguel

ブートストラップモーダルでDirectを使うこともできます。

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
48
Tarun..

そのモーダルにdata-backdrop="static"とdata-keyboard="false"属性を追加するだけです。

例えば。

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
37
Ganesh Putta

あなたは以下のコードを使用することができます

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

デフォルトの動作を変更します。

22
Rafael Keller

私はこれらの属性を使います、そしてそれはうまくいきます、data-keyboard="false" data-backdrop="static"

16
Arsalan Ahmed Khan
jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});
14
Selva Balaji
<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">
10
Ramesh kumar

このコードは、モーダルの外側をクリックした場合にモーダルが閉じないようにします。 

   $(document).ready(function () {
    $('#myModal').modal({
           backdrop: 'static',
           keyboard: false
    })
   });
8
Rohit Parte
<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

モデルが開いているボタンにdata-backdropとdata-keyboard属性を追加するだけです。

7
Sumit Kumar Gupta

外側のクリックを無効にし、エスケープを有効にする必要がある場合

$（ '＃myModal'）。modal（{
 backdrop： 'static'、//クリック外イベント無効
 keyboard：true //キーボードイベント有効
} ）
5
HoangLong85

次のスクリプトは私のために働きました：

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});
4
Nabid

背景はstatic、キーボードはfalseにしてください。また、jQueryを使用して閉じるボタンをオフにすることも、モーダルHTMLから削除することもできます。この助けを願っています。

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');
1
Anurag Tiwari

モーダルの外側をクリックしてもコードは機能しますが、modal-body内でhtmlinputfieldを使用する場合は、カーソルをその入力にフォーカスし、escキーを押します。 。クリック ここ

1
Marudhu Raj

これを設定する必要がある場合は、 - /モーダルが表示されている場合は、@ Nabidソリューションを使用できます。ただし、 some メソッドにモーダルを閉じることを許可する必要がある場合もあります。 really-close-the-modalクラスのボタンがあり、それがモーダルを本当に閉じるはずであると仮定すると、このコードを使うことができます（jquery）。

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

これは本当にいいコードデザインではありませんが、ローダアニメーションでモーダルが表示される状況で、ajaxリクエストが返されるまで助けになりました。閉鎖。ロード中にモーダルが閉じないようにするために、同様のデザインを使用できます。

0
youen
<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

私はこのcodepenがあなたを助けることができると思います モーダルクローズCSSとブートストラップを防ぎます

0
shubhangi singh