2017-06-17 124 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