CODEWITHSUNDEEP
javascriptjqueryhtml
user3386779
user3386779

Reputation: 7175

Popup not triggered for the second time

I have created a separate popup for each view and it works for the first time. The popup windows comes out when I click the text for the first time. However, the popup window does not come out when I click the same text for the second time. How can I open the popup window on each click?

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>

Upvotes: 2

Views: 476

Answers (2)

Lucas Matos
Lucas Matos

Reputation: 2918

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>

Upvotes: 1

prasanth
prasanth

Reputation: 22490

You could do like this

  1. Already you target the id .No need a call dom modal('show').But all the target id was same .So Add separate id for each modal and respected target button. like popup1,popup2...
  2. Target modal was auto popped.its a default behaviour of bootstrap
  3. And no need to appendTo('body') .Because its already available in 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>

Upvotes: 1

Related Questions