Question

我在弹出窗口中有一个表单但单击按钮后我的表单操作事件不起作用。

我的代码：

＆＃13;

$.fn.expose = function(options) {

  var $modal = $(this),
    $trigger = $("a[href=" + this.selector + "]");

  $modal.on("expose:open", function() {

    $modal.addClass("is-visible");
    $modal.trigger("expose:opened");
  });

  $modal.on("expose:close", function() {

    $modal.removeClass("is-visible");
    $modal.trigger("expose:closed");
  });

  $trigger.on("click", function(e) {

    e.preventDefault();
    $modal.trigger("expose:open");
  });

  $modal.add($modal.find(".close")).on("click", function(e) {

    e.preventDefault();

    // if it isn't the background or close button, bail
    if (e.target !== this)
      return;

    $modal.trigger("expose:close");
  });

  return;
}

$("#Popup").expose();

// Example Cancel Button

$(".cancel").on("click", function(e) {

  e.preventDefault();
  $(this).trigger("expose:close");
});

＆＃13;

.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  visibility: hidden;
}
.Modal .content {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 50%;
  padding: 50px;
  border-radius: 3px;
  background: #fff;
  transform: translate(-50%, -30%) scale(0);
}
.Modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 18px;
  height: 18px;
  padding: 5px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: #2ecc71;
  color: #fff;
}
.Modal .close:before {
  content: '\2715';
}
.Modal.is-visible {
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background .35s;
  -moz-transition: background .35s;
  transition: background .35s;
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  transition-delay: .1s;
}
.Modal.is-visible .content {
  -webkit-transform: translate(-50%, -30%) scale(1);
  -moz-transform: translate(-50%, -30%) scale(1);
  transform: translate(-50%, -30%) scale(1);
  -webkit-transform: transition: transform .35s;
  -moz-transform: transition: transform .35s;
  transition: transform .35s;
}
.button {
  display: block;
  width: 150px;
  height: 45px;
  line-height: 45px;
  margin: 125px auto 0;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  background: #2ecc71;
  color: #fff;
}
input[type="text"] {
  width: 100%;
  border-radius: 50px;
  border: 1px solid #ccc;
  padding: 09px 0px;
  outline: none;
  margin-bottom: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#Popup" class="button">Expose Modal</a>
<!--popup content here-->
<div id="Popup" class="Modal">
  <div class="content">
    <form action="demo.php" method="post" id="register-form">

      <input type="text" name="name" placeholder="Name:" id="name">
      <input type="text" name="location" placeholder="Location:" id="location">

      <div class="center-text vpadding">
        <input type="submit" value="request now" class="button-request">
      </div>
    </form>

    <span class="close"></span>
  </div>
</div>

＆＃13;

请帮助我。

Answer 1

所以现在我将这个onClick提交动作添加到你的代码中，看起来像是在工作。尝试一下。

$(".button-request").on("click", function(e) {
        e.preventDefault();
        $modal.trigger("expose:close");
        $("#register-form").submit();
    });

完成JS

$.fn.expose = function(options) {

  var $modal = $(this),
      $trigger = $("a[href=" + this.selector + "]");

  $modal.on("expose:open", function() {

    $modal.addClass("is-visible");
    $modal.trigger("expose:opened");
  });

  $modal.on("expose:close", function() {

    $modal.removeClass("is-visible");
    $modal.trigger("expose:closed");
  });

  $trigger.on("click", function(e) {

    e.preventDefault();
    $modal.trigger("expose:open");
  });
   $(".button-request").on("click", function(e) {
        e.preventDefault();
        $modal.trigger("expose:close");
        $("#register-form").submit();
    });

  $modal.add( $modal.find(".close") ).on("click", function(e) {

    e.preventDefault();

    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;

    $modal.trigger("expose:close");
  });

  return;
}

$("#Popup").expose();

// Example Cancel Button

$(".cancel").on("click", function(e) {

  e.preventDefault();
  $(this).trigger("expose:close");
});

对于输入以对齐15px，请使用text-indent css属性

input[type="text"]
{
  width: 100%;
  border-radius: 50px;
  border: 1px solid #ccc;
  padding: 09px 0px;
  outline: none;
  margin-bottom: 15px;
  text-indent: 15px;

}

<强> JSFIDDLE

Answer 2

您的e.preventDefault();阻止了您的表单操作。从模态点击事件监听器中删除它。一切都会按预期工作。无需额外的代码或触发。

工作：https://jsfiddle.net/f1wh41fm/2/

更改此

$modal.add( $modal.find(".close") ).on("click", function(e) {

    e.preventDefault();

    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;

    $modal.trigger("expose:close");
  });

到

$modal.add( $modal.find(".close") ).on("click", function(e) {

    //e.preventDefault();

    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;

    $modal.trigger("expose:close");
  });

修改

对于您请求的输入游标缩进，请使用text-indent属性::

input { text-indent:20px; }

表单操作事件无法在弹出窗口

2 个答案: