fancybox 点击 js脚本判断验证，fancybox的宽度高度设置

当我们在使用fancybox做弹出窗口的时候，可能在弹窗之前就需要判断一些验证条件，例如我这里有个案例，用户必须先得勾选一个

那么怎么做呢？我们用到fancybox的一个onStart方法就可以了

$(function () {

            $("#various3").fancybox({
                onStart: function () {
                    var examId = $('input[name="examRadio"]:checked').val();
                    if (examId == null) {
                        alert("请先选择一条记录");
                        return false;
                    }
                },
                'width': '75%',
                'height': '75%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe'
            });

        });

另外他还有其他几个用法

$("#various7").fancybox({
            onStart: function () {
                return window.confirm('Continue?');
            },
            onCancel: function () {
                alert('Canceled!');
            },
            onComplete: function () {
                alert('Completed!');
            },
            onCleanup: function () {
                return window.confirm('Close?');
            },
            onClosed: function () {
                alert('Closed!');
            }
        });

 

 

fancybox的宽度高度设置

在上面的设置里面 我设置的宽度是75%,高度是75%  其实是有问题的，如果你想设定一个弹出的宽度为你指定的宽度和高度怎么做呢？

 

经过测试，让fancybox设置的宽度高度和弹出的tanchu.html页面里面设置div宽度和高度一致就可以够解决这个问题：

$(function () {

            $("#various3").fancybox({
                onStart: function () {
                    var examId = $('input[name="examRadio"]:checked').val();
                    if (examId == null) {
                        alert("请先选择一条记录");
                        return false;
                    }
                },
                padding: 0,
                autoScale: true,
                width: 600,
                height: 180,
                openEffect: 'elastic'
            });

        });

 

<div style="width: 600px; height: 180px;">这里是弹出的内容</div>