jquery - 如何使用带有重力形式的花式框并在提交时关闭？

Question

我在 WordPress 中使用精美的盒子 iFrame 作为重力形式。是否可以在提交表单后而不是在 iFrame 中重定向，关闭花哨的框并在浏览器中重定向？如果表单验证失败，保持打开状态直到表单验证（通过 ajax）？

谢谢

Answer 1

问题是因为它在 iframe 中。尝试创建自己的模式（使用我在下面放置的代码）。

当这是竞争时，请执行以下操作：

在管理员的“表单设置 > 确认”选项卡中。如果 URL 在您的站点之外，请单击“重定向”单选按钮，或者单击“页面”单选按钮并选择驻留在您站点内部的内部页面。

下面的代码可用于使用相同模式包装器的单个或多个表单。

模态 HTML/PHP GFORM（简码）：

<div class="modal_wrapper ac">
<div class="modal_form">

    <div class="modal_contact">
        <h3 class="title al">Contact</h3>
        <p class="al mb20">Send us a message and we will respond as soon as possible.</p>
        <?php 
            echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]');
        ?>
    </div>

    <div class="modal_request">
        <h3 class="title al">Request</h3>
        <p class="al mb20">Make a request for custom personalized jewelry for someone special or for you.</p>
        <?php 
            echo do_shortcode('[gravityform id="2" title="false" description="false" ajax="true"]');
        ?>
    </div>

    <span class="close-btn"></span>
</div>

CSS：

.al {
text-align:left;
}

.mb20 {
margin-bottom:20px;
}

.close-btn {
background:transparent url('../images/close_btn.png') no-repeat 0 0;
position:absolute;
width:26px;
height:26px;
top:-10px;
right:-10px;
cursor:pointer;
opacity:1.0;
-moz-opacity:1.0;
-webkit-opacity:1.0;
-o-opacity:1.0;
-khtml-opacity:1.0;
-ms-opacity:1.0;
outline:none;
text-indent:-9999px;
}

.close-btn:hover {
opacity:0.8;
-moz-opacity:0.8;
-webkit-opacity:0.8;
-o-opacity:0.8;
-khtml-opacity:0.8;
-ms-opacity:0.8;
}

.modal_wrapper {
background:transparent url('../images/bg_modal.png') !important;
position:fixed;
z-index:999;
left:0;
top:0;
filter:alpha(opacity=100) !important;
-moz-opacity:1.0 !important;
opacity:1.0 !important;
display:none;
}

.modal_form {
top:100px;
background:#fff;
position:relative;
border:3px solid #efddc1;
width:370px;
height:auto;
padding:10px 20px;
border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px;
}

.modal_form .title {
font-size:26px;
color:#f76b4f;
margin:10px 0;
text-transform:uppercase;
}

jQuery：

// Hides by default
$('.modal_wrapper').hide();

// Makes the wrapper the same Height & Width as the window
$('.modal_wrapper').css({
    'width': $(window).width() + 'px',
    'height': $(window).height() + 'px'
}); 

// Places the form grandparent in the center vertically & horizontally
$('.modal_form').css({
    'margin-left': '-' + ($('.modal_form').width()/2) + 'px',
    'left': '50%'
});

// Hides the forms parent
$('.modal_contact').hide();
$('.modal_request').hide();


// Makes sure that is stays vertically & horizontally centered when the window is resized
$(window).resize(function(){
    $('.modal_wrapper').css({
        'width': $(window).width() + 'px',
        'height': $(window).height() + 'px'
    });
    $('.modal_form').css({
        'margin-left': '-' + ($('.modal_form').width()/2) + 'px',
        'left': '50%'
    });
});


// Place this or these (contact_form, request_form) class on anything that you want to show the modal
// be sure to hide the other forms in the modal
$('.contact_form').click(function(){
    $('.modal_wrapper').fadeIn('fast');
    $('.modal_contact').show();
    $('.modal_request').hide();
});

$('.request_form').click(function(){
    $('.modal_wrapper').fadeIn('fast');
    $('.modal_contact').hide();
    $('.modal_request').show();
});

// Close the modal
$('.close-btn').click(function(){
    $(this).closest('.modal_wrapper').fadeOut('fast');
});