模态内容 "pages" 并从按钮返回上一页

Question

我正在做这个小网站，不是应用程序，看起来像应用程序。它有模态。在模式中，您单击 link 可以进一步进入下一个视图。然后你可以返回到上一个“页面”或从模态 header 上的后退按钮查看，你也可以关闭模态。

我怎样才能做到以下几点：

“返回”按钮转到上一个视图。如果是第一个视图，则关闭模态。
退出按钮关闭模式。
单击“下一步”按钮时模态内容发生变化。或者，如果没有下一步，则单击另一个按钮或 link.

这是我创建的基本 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>

模态内容 "pages" 并从按钮返回上一页

Modal content "pages" and going back to previous page from button

html

javascript

css

jquery

modal-dialog