彈出窗口沒有第二次觸發

Question

我為每個視圖創建了一個單獨的彈出窗口，並且它是第一次工作。 當我第一次單擊文本時，彈出窗口就會出現。 但是，當我第二次單擊相同的文本時，彈出窗口不會出現。 如何在每次點擊時打開彈出窗口？

 jQuery(document).ready(function($) { $("body").on('click','.popup-trigger',function(e) { // $(this).after( $(this).nextAll('#popup:first') ); // $(this).nextAll('#popup:first').appendTo("body").modal('show'); console.log('clicked popup'); e.stopPropagation(); if(jQuery(window).width() < 767) { $(this).after( $(this).nextAll('#popup:first') ); $(this).nextAll('#popup:first').appendTo('body').modal('show'); } else { // $('#popup').hide(); $(this).nextAll('#popup:first').appendTo('body').modal('show'); }; }); }); 

 You can run the code in here to check my problem: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center"><div class="field-content"></div><div class="field-content">tEST1</div></div></a> <div class="modal fade" id="popup" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"><p>Hello..test1</p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> <div class="views-row views-row-2 views-row-even"> <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">tEST2</div></div></a> <div class="modal fade" id="popup" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"><p>Hello..test2 </p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> <div class="views-row views-row-3 views-row-odd"> <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">Test3</div></div></a> <div class="modal fade" id="popup" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"><p>Hello..test3 </p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> </div> 

Answer 1

你可以這樣

1. 您已經將目標id定位了。不需要調用dom modal('show') 。但是所有目標ID都相同。因此，請為每個有模態且受尊重的目標按鈕添加單獨的id 。 像popup1,popup2...
2. 目標模態被自動彈出，它是引導程序的默認行為
3. 並不需要appendTo('body') 。因為它已經在body中可用

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> <a class="popup-trigger" data-toggle="modal" data-target="#popup"> <div class="col-md-3 col-sm-3 text-center"> <div class="field-content"></div> <div class="field-content">tEST1</div> </div> </a> <div class="modal fade" id="popup" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"> <p>Hello..test1</p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> <div class="views-row views-row-2 views-row-even"> <a class="popup-trigger" data-toggle="modal" data-target="#popup2"> <div class="col-md-3 col-sm-3 text-center"> <div class="field-content"></div> <div class="field-content">tEST2</div> </div> </a> <div class="modal fade" id="popup2" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"> <p>Hello..test2 </p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> <div class="views-row views-row-3 views-row-odd"> <a class="popup-trigger" data-toggle="modal" data-target="#popup3"> <div class="col-md-3 col-sm-3 text-center"> <div class="field-content"></div> <div class="field-content">Test3</div> </div> </a> <div class="modal fade" id="popup3" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"> <p>Hello..test3 </p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> </div> 

Answer 2

 jQuery(document).ready(function($) { $("body").on('click','.popup-trigger',function(e) { // $(this).after( $(this).nextAll('#popup:first') ); // $(this).nextAll('#popup:first').appendTo("body").modal('show'); console.log('clicked popup'); e.stopPropagation(); if(jQuery(window).width() < 767) { $(this).after( $(this).nextAll('#popup:first') ); $(this).nextAll('#popup:first').modal('show'); } else { // $('#popup').hide(); $(this).nextAll('#popup:first').modal('show'); }; }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center"><div class="field-content"></div><div class="field-content">tEST1</div></div></a> <div class="modal fade" id="popup" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"><p>Hello..test1</p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> <div class="views-row views-row-2 views-row-even"> <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">tEST2</div></div></a> <div class="modal fade" id="popup" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"><p>Hello..test2 </p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> <div class="views-row views-row-3 views-row-odd"> <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">Test3</div></div></a> <div class="modal fade" id="popup" role="dialog" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="popup-content"> <div class="field-content"><p>Hello..test3 </p> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </div> </div>