模態內容“頁面”並從按鈕返回上一頁

Question

我正在做這個小網站，而不是一個應用程序，它看起來像一個應用程序。 它有模態。 在模態中，您單擊可進一步進入下一個視圖的鏈接。 然后您可以返回上一個“頁面”或從模態標題上的后退按鈕查看，您也可以關閉模​​態。

我怎樣才能做到以下幾點：

1. 返回按鈕返回上一個視圖。 如果它是第一個視圖，則關閉模態。
2. 退出按鈕關閉模態。
3. 單擊“下一步”按鈕時，模態內容會發生變化。 或者，如果沒有下一步，則單擊另一個按鈕或鏈接。

這是我創建的基本 HTML 代碼：

 .modal{ max-width:400px; margin:0 auto; background:#f5f5f5; border-radius:6px; } .modal-header{ position:relative; padding:20px; background:#eee; display:flex; text-align:center; align-items:center; justify-content:center; border-radius:6px 6px 0 0; } .modal-header a{ text-decoration:none; display:block; width:30px; height:30px; background:#aaa; line-height:30px; text-align:center; color:#fff; } .close-modal{ margin-left:auto; } .modal-header h3{ margin:0 0 0 auto; } .modal-content{ padding:30px; } .modal-content h2{ text-align:center; } .modal-content .form-block{ margin:20px 0; } .modal-content .form-control{ width:100%; border:0; background:transparent; border-bottom:2px solid #aaa; padding:5px 0; height:40px; } .modal-content .btn{ display:block; text-align:center; background:blue; text-decoration:none; padding:10px; border-radius:6px; color:#fff; }

 <div class="modal"> <div class="modal-header"> <a href="#" class="goback">&lt;</a> <h3>Title here</h3> <a href="#" class="close-modal">&times;</a> </div> <div class="modal-content"> <h2>This is content 1st block</h2> <form> <div class="form-block"> <input type="text" class="form-control" placeholder="Write here" id="field-1" name="field-1" required> </div> <a href="#" class="btn" id="myButton">Next</a> </form> </div> <div class="modal-content"> <h2>This is content 2nd block</h2> <form> <div class="form-block"> <input type="text" class="form-control" placeholder="Write here" id="field-2" name="field-2" required> </div> <div class="form-block"> <input type="text" class="form-control" placeholder="Write here" id="field-3" name="field-3" required> </div> <a href="#" class="btn" id="myButton">Next</a> </form> </div> </div>

Answer 1

我這樣做了，告訴我它是否符合您的預期？

我所有的代碼都被注釋了。

 $(function(){ // hide all elements exept first one $('.modal-content:not(:first)').hide(); // add class last and first to last and fist modal-content divs $('.modal-content:first').addClass('first'); $('.modal-content:last').addClass('last'); // click on go back $('.goback').click(function() { // check if its not the first div modal-content if (!$('.modal-content:visible').is('.first')) { var currentModalContent = $('.modal-content:visible'); var prevModalContent = $(currentModalContent).prev('.modal-content'); $(currentModalContent).hide(); $(prevModalContent).fadeIn(); } else { // its the first div so we trigger the click to close the modal $('.close-modal').trigger('click'); } }); // close the modal $('.close-modal').click(function() { $('.modal').fadeOut(); }); // click on go next $('.btn').click(function() { // check if its not the last div modal-content if (!$('.modal-content:visible').is('.last')) { var currentModalContent = $(this).parents('.modal-content'); $(currentModalContent).hide(); $(currentModalContent).next('.modal-content').fadeIn(); } else { // its the last div $(this).text('Another button'); } }); });

 .modal{ max-width:400px; margin:0 auto; background:#f5f5f5; border-radius:6px; } .modal-header{ position:relative; padding:20px; background:#eee; display:flex; text-align:center; align-items:center; justify-content:center; border-radius:6px 6px 0 0; } .modal-header a{ text-decoration:none; display:block; width:30px; height:30px; background:#aaa; line-height:30px; text-align:center; color:#fff; } .close-modal{ margin-left:auto; } .modal-header h3{ margin:0 0 0 auto; } .modal-content{ padding:30px; } .modal-content h2{ text-align:center; } .modal-content .form-block{ margin:20px 0; } .modal-content .form-control{ width:100%; border:0; background:transparent; border-bottom:2px solid #aaa; padding:5px 0; height:40px; } .modal-content .btn{ display:block; text-align:center; background:blue; text-decoration:none; padding:10px; border-radius:6px; color:#fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal"> <div class="modal-header"> <a href="#" class="goback">&lt;</a> <h3>Title here</h3> <a href="#" class="close-modal">&times;</a> </div> <div class="modal-content"> <h2>This is content 1st block</h2> <form> <div class="form-block"> <input type="text" class="form-control" placeholder="Write here" id="field-1" name="field-1" required> </div> <a href="#" class="btn">Next</a> </form> </div> <div class="modal-content"> <h2>This is content 2nd block</h2> <form> <div class="form-block"> <input type="text" class="form-control" placeholder="Write here" id="field-2" name="field-2" required> </div> <div class="form-block"> <input type="text" class="form-control" placeholder="Write here" id="field-3" name="field-3" required> </div> <a href="#" class="btn">Next</a> </form> </div> </div>