チェックボックスをオンにした後でポップアップを閉じる方法

Question

お客様からの特定のリクエストがあります。私は開発者よりもデザイナーです。私は、カスタムの連絡フォームを統合したWordPressのテーマに取り組んでいます。

"Submit"ボタンにリンクを張る必要があります。このボタンをクリックすると、確認用のポップアップが開きます。ポップアップで、ユーザーは「」というテキストのチェックボックスを見つけ、自分の個人情報の処理に関する情報を読み、理解し、受け入れたことを宣言します。 "

チェックボックスをオンにすると、そのポップアップの下部にある "Continue"ボタンを有効にする必要があります（チェックボックスをオンにする前に、[続行]ボタンは無効になります）。 [続行]ボタンをクリックすると、ポップアップが消えてフォームが起動します。ここで

は私が見えるようにポップアップをご希望の方法は次のとおりです。

ここでは、フォームの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

JavaScript jQueryを使用してください。だからまずjQueryプラグインをインストールしてください。 次のようにフォーム内のポップアップを入れてのonclickイベントに送信ボタンを変更します。これは、表示されるはずです

<script> 

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

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

     </script> 

：

<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関数を（あなたの頭の部分に入れて）行います送信ボタンをクリックするとポップアップが表示され、チェックボックスがオンの場合は続行ボタンが有効になります。

Answer 2

あなたが使用Bootstrap Modalあります。ダイアログを閉じるコントロールがモーダル内に配置されている場合は、data-dismiss="modal"属性をこのコントロールに追加するだけです。ロックまたはアンロックするにはchechkboxのクリックイベントのためのボタンの使用ハンドラーを続行します。

また、次のような別の一連のユーザー操作を実装することもできます。

$(".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"); 
 
    } 
 
}

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

提出ボタンは、確認のためのチェックボックスを含むダイアログボックスが開きます。 Continueボタンはフォームを送信しますが、チェックボックスがオンになるまで無効になります。