单击按钮时弹出一个表单

Question

单击按钮时，我希望在页面中央出现一个表单。我在 http://jqueryui.com/dialog/#modal-form 找到了解决方案。但是可以不用包含 jqueryui 以更简单的方式完成吗？

另外，如何使背景字段无法访问？即，当表单打开时，背景字段应该是可见的，但我不应该能够与它们进行交互。

原文由 srk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

创建一个隐藏表单，然后单击按钮使用 .show() 和 .hide( ) 切换表单

 $('#show').on('click', function () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})

 .center {
    margin: auto;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hideform {
    display: none;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center hideform">
    <button id="close" style="float: right;">X</button>
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</div>
<button id="show">Show form</button>

原文由 Junius L. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 $(document).ready(function() {
  $('button').on('click', function() {
    $('.bg-modal').addClass('bg-modal-visible');
  });
  $('.bg-modal').on('click', function(e) {
    e.preventDefault();
    console.log($(e.target));
    if ($(e.target).is('.fa-close') || $(e.target).is('.col-md-12') || $(e.target).is('.bg-modal')) {
      $('.bg-modal').removeClass('bg-modal-visible');
    }
  });
});

 * {
  padding: 0;
  margin: 0;
}

body {
  background: #0B3861;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

header {
  background: #f80;
  padding: 40px;
}

header h1 {
  color: #fff;
  text-transform: uppercase;
}

button {
  margin: auto;
  float: none;
  position: relative;
  top: 50px;
  left: 45%;
}

.btn-warning {
  background: rgba(255, 100, 45, 0.9);
}

.btn-warning:hover {
  background: rgba(255, 100, 45, 1);
}

.bg-modal {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.bg-modal-visible {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.popup {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  margin: 60px auto;
  transform: translateY(-400px);
  -webkit-transform: translateY(-400px);
}

.bg-modal-visible .popup {
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.popup:after {
  display: block;
  content: "";
  clear: both;
}

.popup-body {
  margin: 20px 0px;
}

.popup-header {
  border-bottom: 1px solid #ccc;
  padding-bottom: 30px;
}

.popup ul {
  list-style: none;
}

.popup ul li.active a {}

.popup ul li a {
  background: #F78181;
  padding: 10px;
  width: 50%;
  display: block;
  float: left;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border: 1px solid #FA5858;
}

.popup ul li a:hover {
  background: #FA5858;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1> modal examplification </h1>
      </div>
    </div>
  </div>
</header>

<div class="container">
  <div class="row">
    <a href="#"> <button class="btn btn-warning"> <i class="fa fa-chevron-left"></i> show modal </button></a>
  </div>
</div>

<div class="bg-modal">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="popup">
          <div class="popup-header">
            <a href="#" class="close">
              <div class="close"> <i class="fa fa-close"></i></div>
            </a>
          </div>
          <div class="popup-body">
            <p> hello you there </p>
          </div>
          <div class="popup-footer">
            <ul>
              <li> <a href="#"> yes  </a> </li>
              <li> <a href="#"> no  </a> </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

原文由 samehanwar 发布，翻译遵循 CC BY-SA 3.0 许可协议