2017-03-26 12 views
0

モーダルを閉じる際に問題があります。 jqueryとokを確認します。モーダルは終了しません

私は1.12.4バージョンを使用していると私は、コードの頭の中でタグを持っている:

<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM"></a> 

そして、私のモーダルcocdeは次のとおりです:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

マイオープンモーダルタグがある

<div id="komentarM" class="modal"> 
    <div class="modal-content"> 
     <h4>Modal Header</h4> 
     <p>A bunch of text</p> 
    </div> 
    <input type="text" name="id" value=""></input> 
    <div class="modal-footer"> 
     <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
</div> 

このコードでは、私はモーダルを示すトリガーを試します:

<script> 

$(ドキュメント).ready(関数(){

$('#komentarM').on('shown.bs.modal', function (e) { 
    data = $(e.relatedTarget).data('id') 
    $(e.currentTarget).find('input[name="id"]').val(data); 
}); 

})。

モーダルを閉じるにはクリックしてください。ページ上の黒いスペースをクリックすると問題が発生します。モーダルは閉じられましたが、モーダルを開くと再びオーバーレイが表示されます。 私はモーダルを閉じてもう一度開くと何が起こるのかを写真に投稿しています。

enter image description here

+0

[modal]を開く特定の[button]をクリックして[console]を開いたときに[error]が表示されていないか確認しましたか? – eeya

答えて

0

問題がクローズモーダルにあった、モーダルは近いがありませんでしたコード、私はその開始休憩を開いて、私はjqで追加しようとするとき:

$(document.body).on('click', '.lean-overlay', function() { 
$('.modal').modal('hide'); 
}); 
0

あなたはクローム/ Firefoxのエラーコンソールをチェックしましたか?私はそれがモーダルを再開しようとしているときにいくつかのjsエラーを投げていると思います。理由は、再オープン時に次のコードを再実行することです。私は以下のコードで正しくない可能性がありますが、いくつかのエラーはエラーがコンソールにスローされていない場合、私は次の安定バージョンにjQueryライブラリを変更してみてくださいお勧めしますし、デバッグ

$('#komentarM').on('shown.bs.modal', function (e) { 
data = $(e.relatedTarget).data('id') 
$(e.currentTarget).find('input[name="id"]').val(data); 
}); 

に役立つコンソールに記録されなければなりませんそれがブートストラップフレームワークと互換性があることを確認してください。

表示されたイベントを使用していない場合は、それは機能しますか(モーダルが再開されます)?

[修正サンプル]

<html> 
<head> 
<script 
    src="https://code.jquery.com/jquery-1.12.4.js" 
    integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 
    crossorigin="anonymous"></script> 
<link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css  " rel="stylesheet" integrity="sha384-  BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"  crossorigin="anonymous"> 
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 
<body> 
<div id="komentarM" class="modal"> 
<div class="modal-content"> 
    <h4>Modal Header</h4> 
    <p>A bunch of text</p> 
</div> 
<input type="text" name="id" value=""></input> 
<div class="modal-footer"> 
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
</div> 
<a data-toggle="modal" class="modal-trigger" data-id="11"  href="#komentarM">Hello</a> 

</body> 
<script> 
$(document).ready(function() { 

$('#komentarM').on('shown.bs.modal', function (e) { 
    data = $(e.relatedTarget).data('id') 
    $(e.currentTarget).find('input[name="id"]').val(data); 
    }); 
}); 

</script> 
+1

こんにちは、コンソールログに何のエラーもありません。モーダルを初めて呼び出すと閉じることができますが、私がsecound時間を呼び出すと、exmpが動作しないという画像が表示されます。 –

+0

与えられたコードをコピーしました。サンプル1とモーダルは何のエラーもなくリンクをクリックするたびにポップアップ表示されています。つまり、共有されていないコードの他の部分に問題があることを意味します(他のCSS、javasscriptプラグイン、またはもしあれば使用しているテーマ)。私はあなたがそれをクロムでデバッグすることをお勧めします。そして、コードを開いてモーダルを開くためのリンクをクリックすると、 "modal-open"が追加されますか?(例えば、以下のコードでは adang

0

あなたが行にセミコロンを追加するのを忘れ:2

$('#komentarM').on('shown.bs.modal', function (e) { 
 
    data = $(e.relatedTarget).data('id'); 
 
    $(e.currentTarget).find('input[name="id"]').val(data); 
 
});

+1

はい、問題はありません... –

関連する問題