Question

我有来自客户的具体要求。我是设计师而非开发人员。我正在使用集成了自定义联系表单的WordPress主题。

我需要在＆＃34; 提交＆＃34;上添加一个链接。单击按钮将打开确认弹出窗口。在弹出窗口中，用户会找到一个带有文字的复选框，说明＆＃34; 我声明我已阅读，理解并接受有关处理我的个人数据的信息＆＃34;。 / p>

选中复选框后，按＆＃34; 继续＆＃34;应该启用该弹出窗口底部的按钮（在选中复选框之前，禁用“继续”按钮）。单击“继续”按钮后，弹出窗口将消失，表单将启动。

以下是我希望弹出窗口的样子：

Popup preview png

以下是表单的HTML：

<form method="post" name="contactform" class="peThemeContactForm">
    <div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
        <div class="form-group">
            <input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
        </div>
        <div class="form-group">
            <input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
        </div>
        <div class="form-group">
            <input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
        </div>
    </div>
    <div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
        <div class="form-group">
            <textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
        </div>
    </div>
    <input type="submit" class="btn btn-custom up animated hiding" value="<?php _e("Send Message",'Pixelentity Theme/Plugin'); ?>" data-animation="fadeInUpBig">
</form>

Answer 1

您正在使用Bootstrap Modal。如果应关闭对话框的控件放在模态中，则只需将data-dismiss="modal"属性添加到此控件。要锁定或解锁继续按钮，请使用chechkbox点击事件处理程序。

您还可以实现下面演示的另一系列用户操作。

＆＃13;

$(".modal").on('show.bs.modal', lock);
$("#MyModal [type=checkbox]").click(lock);
$("#MyModal .btn-primary").click(function() {
  $("#MyForm").submit();
});

function lock() {
  var flag = $("#MyModal [type=checkbox]").prop('checked');
  if (!flag) {
    $("#MyModal .btn-primary").attr("disabled", "disabled");
  } else {
    $("#MyModal .btn-primary").removeAttr("disabled");
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Modal -->
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Privacy Policy</h4>
      </div>
      <div class="modal-body">
        <div class="checkbox">
          <label>
            <input type="checkbox"> I declare that I have read, understood and accepted the information on the processing of my personal data.
        </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" disabled="disabled">Continue</button>
      </div>
    </div>
  </div>
</div>

<!-- Form with confirmation request -->
<form id="MyForm" action="/">
  <p>You will have to accept our privacy policy to submit the form data.</p>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">Submit</button>
</form>

＆＃13;

提交按钮打开对话框，其中包含用于确认的复选框。继续按钮会提交表单，但在选中此复选框之前会被禁用。

Answer 2

你应该使用JavaScript jQuery。所以首先安装jQuery插件。将弹出窗口放在这样的表单中，并将提交按钮更改为onclick事件：

    <form method="post" name="contactform" class="peThemeContactForm">
    <div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
        <div class="form-group">
            <input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
        </div>
        <div class="form-group">
            <input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
        </div>
        <div class="form-group">
            <input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
        </div>
    </div>
    <div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
        <div class="form-group">
            <textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
        </div>
    </div>
    <a onclick="popupshow()" class="btn btn-custom up animated hiding" data-animation="fadeInUpBig"><?php echo _e("Send Message",'Pixelentity Theme/Plugin'); ?></a> //Submit-Button

//PopUP
<div id="popup" style="display:none;">
<input type="checkbox" id="checkbox" onchange="checkboxclick()">
<button type="submit" id="mycheckbox" disabled>Continue</button>
</div>

</form>

现在执行Javascript函数（将它们放在头部）：

    <script>

        function popupshow() {
            document.getElementById("popup").style = "";
            }

        function checkboxclick() {
        if (document.getElementById("mycheckbox").checked) {
            $('#mycheckbox').prop('disabled', false);
            } else {
            $('#mycheckbox').prop('disabled', true);
            }
        }

        </script>

如果单击提交按钮，则应显示弹出窗口，如果选中该复选框，则应激活继续按钮。

选中复选框后如何关闭弹出窗口

2 个答案: