web-dev-qa-db-ja.com

bootstrap modalがonclickを使用してボタンから閉じるのを防ぐ方法は？

ボタン付きのモーダルがあります（保存）

_<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
    </button>
_

do_save()関数が失敗したときに閉じるのを防ぐ方法は？ （たとえば、一部のデータが検証に失敗した場合）

javascripttwitter-bootstrapmodal-dialogtwitter-bootstrap-3
12
Kokizzu

data-dismiss="modal"を使用せず、関数にモーダルを閉じさせる（非表示にする）ようにします。

<button type="button" class="btn btn-success btn-sm" onclick="do_save()">Save</button>

」

function do_save()
    {
        if(Math.floor(Math.random() * 2)==1)
        {
            console.log('success');
            $('#myModal').modal('hide');
            return;
        }   
        console.log('failure');
        return false;
    }
25
Bass Jobsen

とにかくjQueryを使用しているので、JavaScript/jQueryをコードに埋め込まないようにしてください。

$('#buttonId').on( 'click', function () {
   // either call do_save or embed the contents of do_save in here
   var myDataIsValid = true; // change to call validator function
   if (myDataIsValid) {
     $('#myModal').modal('hide');
   }
   return true; // value depends on whether you want stopPropagation or not.
});

HTML：

<button id="buttonId" type="button" class="btn btn-success btn-sm">Save</button>

別の方法として、 'hide'イベントをインターセプトし、そこからfalseを返すことで、おそらく終了を防ぐことができます。

6
vogomatix

次のようにボタンからクリックイベントをキャッチした場合：

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
     });

あなたは実際にあなたのモーダルのクローズを防ぐことができます。このため、状況に応じて、次の2つの機能が役立ちます。

     clickEvent.preventDefault();
     clickEvent.stopPropagation();

このサイト（ドイツ語）を理解した場合 http://www.mediaevent.de/javascript/event-handler-default-verhindern.html を正しく理解すると、preventDefault（）はすぐにデフォルトのアクション（リンクをたどるなど）。ただし、イベント自体は引き続きDOMを通過し、さまざまなイベントリスナーによって「聞こえ」ます。これらの1つは、モーダルを非表示にするイベントリスナーです。このためには、DOMを介したイベントの移動を停止する2番目の関数が必要です。したがって、非表示のリスナーはそれを聞くことができず、ウィンドウは閉じられません（非表示にされません）。したがって、次のような関数を実装することをお勧めします。

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
      var myDataIsValid = true;
      // check if Data is valid => myDataIsValid = true or false
      if(myDataIsValid){
       //do Stuff
      }else{
       clickEvent.preventDefault();
       clickEvent.stopPropagation();
       //do other Stuff
      }
    });

私のコードでは、デフォルトのアクションが必要なので、stopPropagation（）を使用するだけでよいので、2つの関数を個別に使用できます。

注：このソリューションは、Firefoxブラウザーでのみテストされています

3
Andrea

bootstrap 4を使用している場合、これは「静的な背景」と呼ばれ、data-backdrop="static"属性を追加することで実現できます

<div class="modal fade" id="modalExample" data-backdrop="static">

src： Bootstrap 4 Modal-Static backdrop

0
Tyson Gibby