提交表单后打开fancybox

时间:2014-09-01 21:12:40

标签: jquery html forms fancybox

我想在提交表单后显示fancybox。这是我的代码

        <form method="get" action="http://test.net/test/test-register-auto.php" id="signup">
            <div class="form-header">
                This is for test
            </div>
            <div class="inputs">
                <input readonly="readonly"  name="firstname" class="form-input" value="test3" placeholder="Enter Your First Name" autofocus="" type="text" />
                <input readonly="readonly" name="email" value="test2" class="form-input" placeholder="Enter Your Email Address" type="email" />
                <select name="countrycode" disabled name="countrycode" class="form-dropdown">
                    <option selected="selected" value="test">test</option>
                </select>
                <input name="phonenumber" readonly="readonly"  value="test class="form-input" placeholder="Your Phone Number" type="text" />

                <input type="submit"  class="button-1" value="REGISTER NOW" />

            </div>
        </form>

这是我的jquery代码

<script type="text/javascript">
   $(function () {
         $("#signup").submit(function () {

            $form = $(this);

            fancybox({
                'width': '100%',
                'height': '100%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe',
                'href': 'http://google.com'
            });
            return false;

        });

    });
</script>

按下按钮提交数据后应打开一个fancybox,我尝试了很多次但没有运气! 在这方面有谁能帮助我?

2 个答案:

答案 0 :(得分:0)

也许您忘记指定将包含fancybox内容的元素,例如

$("#container_box").fancybox({
    'width': '100%',
    'height': '100%',
    'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'iframe',
    'href': 'http://google.com'
});    

答案 1 :(得分:0)

您可以尝试:

<script type="text/javascript">

$(function(){          $(“#signup”)。submit(function(){

        $form = $(this);

        $.fancybox({
            'width': '100%',
            'height': '100%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe',
            'href': 'http://google.com'
        });
        return false;

    });

});