单击按钮时弹出表单

时间：2017-05-20 22:28:43

标签： jquery html forms popup

我想在单击按钮时在页面中央显示一个表单。我在browser compatibility找到了解决方案。 但是，如果不必包含jqueryui，可以用更简单的方式完成吗？

另外，我怎么能让背景字段无法访问？即，当表格打开时，背景字段应该是可见的，但我不能与它们互动。

5 个答案:

答案 0 :(得分：3)

创建隐藏表单，然后点击按钮切换表单，使用.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>

答案 1 :(得分：1)

使用jquery非常简单：

$('.open-form').click(function(){
  if (!$(this).hasClass('open')){
    $('.form').css('display','block')
    $(this).addClass('open');
    $(this).text('CLOSE FORM');
  }
  else{
    $('.form').css('display','none')
    $(this).removeClass('open');
    $(this).text('OPEN FORM');
  }
});
  
input{
  display:block;
  margin-bottom:10px;
}

.parent{
  position: relative;
  height: 100vh;
}

form{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  display:none;
  padding: 20px;
  background-color: lightgray;
}
  
.open-form{
  display: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <form class="form"> 
    <label for="name">name</label>
    <input id="name" type="text">
    <label for="last-name">last name</label>
    <input id="last-name" type="text">
    <label for="city">city</label>
    <input id="city" type="text">
  </form>
  <div class="open-form">OPEN FORM</div>
</div>

答案 2 :(得分：1)

使用jQuery函数使用show和hide，然后使用append函数创建表行。

＆＃13;
＆＃13; 
$("#create-user").click(function() {
  $("#popup").show();
});

$("#close, #cancel, #create").click(function() {
  $("#popup").hide();
});

$("#create").click(function() {
  var name = $("#name").val();
  var email = $("#email").val();
  var password = $("#password").val();
  $("#users tbody").append("<tr><td>" + name + "</td><td>" + email + "</td><td>" + password + "</td></tr>");
});
＆＃13; 
body {
  font-family: Arial, Helvetica, sans-serif;
}

table {
  font-size: 1em;
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
}

label,
input {
  display: block;
}

input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

fieldset {
  padding: 0;
  border: 0;
  margin-top: 25px;
}

h1 {
  font-size: 1.2em;
  margin: .6em 0;
}

table td,
table th {
  border: 1px solid #eee;
  padding: .6em 10px;
  text-align: left;
}

#popup {
  position: relative;
  z-index: 100;
  padding: 10px;
}

.content {
  position: absolute;
  z-index: 10;
  background: #ccc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 5;
  opacity: 0.4;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="users-contain">
    <h1>Existing Users:</h1>
    <table id="users">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Password</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>john.doe@example.com</td>
          <td>johndoe1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button id="create-user" class="ui-button ui-corner-all ui-widget">Create new user</button>

  <div id="popup" style="display: none;">
    <div class="overlay"></div>
    <div class="content">
      <header>
        <div id="close">✖</div>
      </header>
      <form>
        <fieldset>
          <label for="name">Name</label>
          <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
          <label for="email">Email</label>
          <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
          <label for="password">Password</label>
          <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
          <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
      </form>
      <footer>
        <button type="button" id="create">Create an account</button>
        <button type="button" id="cancel">Cancel</button>
      </footer>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

$(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>

答案 4 :(得分：0)

您可以创建自己的对话框，并最初使用display: none隐藏它。然后在按钮上设置一个单击事件，以.show()对话框。

显然，对话框应设置为position: fixed，并通过使用top，left，bottom或right CSS属性进行居中。

我创造了这样的笔 https://codepen.io/joaquintoral/pen/Vbdpqz

相关问题
最新问题