2017-06-17 3 views
0

Ich bin ziemlich neu in JavaScript und FrontEnd, ich versuche, ein modales Popup zu erstellen, die für eine Formularübergabe fragt.Jetzt versuche ich, Popup zu verbergen, sobald der Benutzer Klickt auf den Senden-Button.Wie modales Popup nach der Formularübermittlung zu deaktivieren

function openColorBox(){ 
 
     $.colorbox({iframe:true, width:"50%", height:"50%", href: "new_greeting_form.html"}); 
 
     } 
 
     
 
     setTimeout(openColorBox, 5000); 
 
    </script> 
 
    <script> 
 
// if you want to use the 'fire' or 'disable' fn, 
 
// you need to save OuiBounce to an object 
 
    var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), { 
 
    aggressive: true, 
 
    timer: 0, 
 
    callback: function() { } 
 
    }); 
 

 
    $('body').on('click', function() { 
 
    $('#ouibounce-modal').hide(); 
 
}); 
 

 
$('#ouibounce-modal .modal-footer').on('click', function() { 
 
    $('#ouibounce-modal').hide(); 
 
}); 
 

 
$('#ouibounce-modal .modal').on('click', function(e) { 
 
    e.stopPropagation(); 
 
});
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset=utf-8 /> 
 
    <title>test</title> 
 
    <link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" /> 
 
    <link rel="stylesheet" href="\ouibounce.min.css"> 
 
    
 
    </head> 
 
    <body> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script> 
 
    
 
    <script src="\ouibounce.js"></script> 
 
    <div id="ouibounce-modal"> 
 
    <div class="underlay"></div> 
 
    <div class="modal"> 
 
    <div class="modal-title"> 
 
    <h3> </h3> 
 
    </div> 
 
    <div class="modal-body"> 
 

 

 
    <h2>ThankYou for coming!!</h2> 
 
    </div> 
 
    <div class="modal-footer"> 
 

 
    </div> 
 
</div> 
 
</div> 
 

 

 
    </body> 
 
</html>

Wer in dieser bitte helfen Sie mir, ich bin neu und nicht immer, wie in diesem fortzufahren.

+1

Sie können Bootstrap modalen Popup verwenden, die von jquery einfach und leicht zu verwalten. Zum Beispiel '$ ('# modal') .modal ('hide');' – Vineesh

Antwort

0

beim Abschicken Ihres Formulars verwenden Sie die folgende Zeile zum Verbergen.

$('#ouibounce-modal').hide(); 
0

Verwendung dieser Linie, wenn der Benutzer das Formular abzuschicken

$('#yourmodal').hide(); 
+0

danke für die Antwort, können Sie auch eine Methode vorschlagen, bei der die Validierung von Formulardaten erfolgt, dann verschwindet das modale Popup. – path612

Verwandte Themen