How to add next button to popup?

Question

I want to apply below script to create the next button on a popup. When I used the code to open the popup, it works properly. But when trying to apply the code to create the next button, it does not work. Please help me to fix the issue.

Here the script I used.

<script>       
$(document).ready(function() {
   $(".getAssignment").click(function() {
      var $divs = $(this).parent().find(".modalDialog");
      if ($divs.length > 0) {
         window.location.href = "#" + $divs[ Math.floor(Math.random() * $divs.length) ].id;
      }
   });
});    
</script> 

<input class="getAssignment" type="button" value="Open Modal">

<div id="openModal" class="modalDialog">
    <div>
    <input class="getAssignment" type="button" value="Next">    
   <a href="#close" title="Close" class="close">X</a>
   <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
</div>

https://jsfiddle.net/Sanjeewani/0pfov2b9/6/

here is the full code I tried. Actually, I want to open popups one by one using the next button. https://jsfiddle.net/Sanjeewani/0pfov2b9/2/ — User2893, Jul 11 '18 at 06:03
Possible duplicate of [Multiple modals overlay](https://stackoverflow.com/questions/19305821/multiple-modals-overlay) — caiovisk, Jul 11 '18 at 06:11
I want to open random popups. So I think it is not possible for this. — User2893, Jul 11 '18 at 06:18

Daniel Stackenland · Accepted Answer · 2018-07-11T06:58:19.030

1

The problem is var $divs = $(this).parent().find(".modalDialog"); it's correct relative the "Open Modal"-button, but from the "Next"-button inside the modal dialog parent() is not the element containing the modal-divs... try changing to var $divs = $(".modalDialog");

edited Jul 11 '18 at 06:58

answered Jul 11 '18 at 06:42

Daniel Stackenland

3,149
1
19
22

score 0 · Answer 2 · answered Jul 11 '18 at 07:14

It can be done by getting a random div number.I have change js code little bit kindly check

$(document).ready(function() {
  var sr_num = ['1', '2', '3']; 
  $(".getAssignment").click(function() {
    var rand = sr_num[Math.floor(Math.random() * sr_num.length)];
    var demo = "#openModal" + rand;
    window.location.href.split('#')[0]
    window.location.href = demo;
  });
});

Here is working code check here

Hope it will help you

How to add next button to popup?

2 Answers2