弹出窗口没有第二次触发

时间：2019-11-26 07:02:17

标签： javascript jquery html

我为每个视图创建了一个单独的弹出窗口，并且它是第一次工作。当我第一次单击文本时，弹出窗口就会出现。 但是，当我第二次单击相同的文本时，弹出窗口不会出现。每次点击如何打开弹出窗口？

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>

2 个答案:

答案 0 :(得分：1)

你可以这样做

  1. 您已经定位了id了。不需要调用dom modal('show')。但是所有目标ID都相同。因此，请为每个模态和受尊重的目标按钮分别添加id。像popup1,popup2...
  2. 目标模式已自动弹出。它是引导程序的默认行为
  3. 无需appendTo('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>

答案 1 :(得分：1)

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>

相关问题
最新问题