Project

There is a popup window on jquery, and a button further, (click the menu item How to play ),

// code without styles

$('a.close').click(function() { $(this).parent().fadeOut(100); $('#overlay').remove('#overlay'); return false; }); $('a.show_popup__rules').click(function() { $('div.' + $(this).attr("rel")).fadeIn(500); $("body").append("<div id='overlay'></div>"); $('#overlay').show().css({ 'filter': 'alpha(opacity=70)' }); return false; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="step-one" class="popup__rules step1"> <a class="close" href="#">Close</a> <div class="popup__head">Как играть?</div> <div class="popup__content"> <p>Выберите интересующий Вас предмет или игру:</p> <div class="pic__wrap"> <img src="../img/mini-pic-step1.png" alt="mini"> </div> </div> <div class="popup__footer"> <a href="#step-two" class="popup_next">Далее</a> </div> </div> <div id="step-two" class="popup__rules step2"> <a class="close" href="#">Close</a> <div class="popup__head">Как играть?</div> <div class="popup__content"> <p>Выберите свободную ячейку или нажмите кнопку "Занять случайное место". Чем больше мест вы займете, тем выше шанс победить!</p> <div class="pic__wrap"> <img src="../img/mini-pic-step2.png" alt="mini"> </div> </div> <div class="popup__footer"> <a href="#step-one" class="popup_prev">Назад</a> <a href="#step-three" class="popup_next">Далее</a> </div> </div>

as well as the second popup window, I am trying for an hour to implement the transition between them when I press the button. How is this simple to implement? Tell me.

    1 answer 1

    The problem was solved in this way:

     <div id="step-one" class="popup__rules step1"> <a class="close" href="#">Close</a> <div class="popup__head">Как играть?</div> <div class="popup__content"> <p>Выберите интересующий Вас предмет или игру:</p> <div class="pic__wrap"> <img src="../img/mini-pic-step1.png" alt="mini"> </div> </div> <div class="popup__footer"> <a href="#step-two" class="popup_next" onclick="nextStep(1)">Далее</a> </div> </div> <div id="step-two" class="popup__rules step2"> <a class="close" href="#">Close</a> <div class="popup__head">Как играть?</div> <div class="popup__content"> <p>Выберите свободную ячейку или нажмите кнопку "Занять случайное место". Чем больше мест вы займете, тем выше шанс победить!</p> <div class="pic__wrap"> <img src="../img/mini-pic-step2.png" alt="mini"> </div> </div> <div class="popup__footer"> <a href="#step-one" class="popup_prev" onclick="prevStep(1)">Назад</a> <a href="#step-three" class="popup_next" onclick="nextStep(2)">Далее</a> </div> </div> <div id="step-three" class="popup__rules step3"> <a class="close" href="#">Close</a> <div class="popup__head">Как играть?</div> <div class="popup__content"> <p>Когда все места будут заняты, система автоматически выберет победителя на сайте <a href="#" class="random">random.org</a> и он получит предмет или игру.</p> <p>Желаем удачи!</p> </div> <div class="popup__footer"> <a href="#step-one" class="popup_prev" onclick="prevStep(2)">Назад</a> </div> </div> <script> function nextStep($step) { if ($step == 1) { $("#step-one").hide(); $("#step-two").show(); } else if ($step == 2) { $("#step-two").hide(); $("#step-three").show(); } } function prevStep($step) { if ($step == 1) { $("#step-one").show(); $("#step-two").hide(); } else if ($step == 2) { $("#step-two").show(); $("#step-three").hide(); } } </script>