Wie Popup zu schließen, nachdem das Kontrollkästchen aktiviert ist

Question

Ich habe eine bestimmte Anfrage von einem Kunden. Ich bin eher ein Designer als ein Entwickler. Ich arbeite an einem WordPress Theme mit einem benutzerdefinierten Kontaktformular integriert.

Ich muss einen Link auf die "Senden" Schaltfläche, die beim Klicken öffnet ein Bestätigungsdialogfeld platzieren. In dem Popup würde der Benutzer eine Checkbox mit einem Text finden, der sagt: "Ich erkläre, dass ich die Informationen über die Verarbeitung meiner persönlichen Daten gelesen, verstanden und akzeptiert habe".

Sobald sie das Kontrollkästchen aktiviert haben, sollte eine "Weiter" Schaltfläche am unteren Rand dieses Popup aktiviert werden (vor dem Aktivieren des Kontrollkästchens ist die Schaltfläche Weiter deaktiviert). Wenn auf die Schaltfläche Weiter geklickt wird, wird das Popup-Fenster entfernt und das Formular wird gestartet.

Hier ist, wie ich möchte, dass die Pop-up aussehen:

Hier ist der HTML-Code der Form:

<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

Sie sollten es mit JavaScript jQuery tun. Installieren Sie also zuerst das jQuery-Plugin. Setzen Sie das Popup in der Form wie diese und die Schaltfläche Ereignis einer Onclick einreichen ändern:

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

Nun ist die Javascript-Funktionen tun (Setzen Sie sie in Ihrem Kopf Abschnitt):

<script> 

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

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

     </script> 

Dies sollte zeigen das Popup, wenn Sie auf den Submit-Button klicken und die Weiter-Schaltfläche aktivieren sollten, wenn das Kontrollkästchen aktiviert ist.

Answer 2

Sie sind Bootstrap Modal Einsatz. Wenn das Steuerelement, das den Dialog schließen soll, innerhalb des Modals platziert wird, fügen Sie einfach das Attribut data-dismiss="modal" diesem Steuerelement hinzu. So sperren oder entsperren Sie Weiter Schaltfläche verwenden Sie Handler für die Chechkbox Click-Ereignis.

Sie können auch eine andere Sequenz von Benutzeraktionen implementieren, die unten demonstriert wird.

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

Das öffnet Senden Schaltfläche Dialogfeld, in das Kontrollkästchen für die Bestätigung enthält. Die Weiter Schaltfläche sendet das Formular, aber es ist deaktiviert, bis das Kontrollkästchen aktiviert ist.