【发布时间】：2019-11-26 17:18:14
【问题描述】：
我为每个视图创建了一个单独的弹出窗口，它是第一次工作。当我第一次单击文本时弹出窗口出现。 但是，当我第二次单击相同的文本时，弹出窗口不会出现。如何在每次点击时打开弹出窗口？
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>
【问题讨论】：
-
您正在四处移动弹出元素（使用
appendTo），因此接下来您单击按钮时，它们不是第一次出现的位置。
标签： javascript jquery html