How to add next button to popup?

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/

2 answers

  • answered 2018-07-11 06:42 Daniel Stackenland

    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");

  • answered 2018-07-11 07:14 Anshul

    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