Question

我试图在我的网站上设置一个弹出窗口，允许用户订阅我的电子邮件列表，该窗体在页面中（不在弹出窗口内）时工作正常。但是只要我将它放入我的jQuery叠加层（在X秒后出现），表单就不起作用了。

HTML

    <div class="main-content">
<p>Please <a class="show-popup" href="#">click here</a> to see the popup</p>
</div>

<div class="overlay-bg">
<div class="overlay-content">
<form action="http://wrd.createsend.com/t/y/s/qljjjl/" method="post" class="basic-grey" id="subform">
    <h1>Subscribe 
        <span>Sign up for our FREE monthly newsletter to stay up to date with the latest digital news, views and articles</span>
    </h1>
    <label for="fieldName">
        <span>Your Name:</span>
        <input id="fieldName" type="text" name="cm-name" placeholder="Your Full Name" />
    </label>
    <label for="fieldEmail">
        <span>Your Email:</span>
        <input id="fieldEmail" type="email" name="cm-qljjjl-qljjjl" placeholder="Valid Email Address" />
    </label>  
     <label>
        <span>&nbsp;</span> 
        <button type="submit" class="button" form="subform">Subscribe</button>
    </label>    
</form>


</div>
</div>

JS

<script>
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('.overlay-bg').show(); //display your popup
});

// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide(); // hide the overlay
});

// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
    $('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
    return false;
});

});
</script>

        <script type="text/javascript">                                         
        $(document).ready(function() {

        function showpanel() { 
            if( $.cookie('showOnlyOne') ){
                //it is still within the day
                //hide the div
                $('#shownOnlyOnceADay').hide();
            } else {
                //either cookie already expired, or user never visit the site
                //create the cookie
                $.cookie('showOnlyOne', 'showOnlyOne', { expires: 10 });

                //and display the div
                $('.overlay-bg').fadeIn('slow'); // this will fade in the popup
}}

 setTimeout(showpanel, 3000)
        });
        </script>

从上面的代码可以看出，我还计划在有人点击链接时显示弹出窗口。

你可以在这里查看它的演示（不工作） - 如果等待5秒，弹出窗口将显示：

http://thiswebguy.com/testing/

Answer 1

行

$('.overlay-content').click(function(){
    return false;
});

正在停止表单注册提交点击。

更改功能，使其排除提交按钮

$('.overlay-content :not(:submit)').click(etc...)

或使用event.srcElement返回true

 $('.overlay-content').click(function(e){
if($(e.srcElement).is(':submit'))
        return true;
else return false;
    });

Answer 2

还可以添加：

 $('.button').click(function(e) { e.stopPropagation(); });

简单的表单不适用于jQuery Overlay

2 个答案: