2017-06-17 56 views
0

我對JavaScript和frontEnd來說很新穎,我試圖建立一個模式彈出窗口,要求提交表單。現在我想要做的就是儘快隱藏彈出窗口點擊提交按鈕。如何在表單提交後禁用模態彈出框

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>

請人幫我在這,我是新和沒有得到如何在此進行。

+1

您可以使用引導模式彈出既簡單又容易從jQuery的管理。例如'$('#modal')。modal('hide');' – Vineesh

回答

0

對您的表單提交使用下面的行來隱藏。

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

使用這一行,當用戶提交表單

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

感謝您的回答,您是否還可以建議一種方法,即對錶單數據進行驗證,然後模態彈出消失。 – path612

相關問題