zoukankan      html  css  js  c++  java
  • fancybox 点击 js脚本判断验证,fancybox的宽度高度设置

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

    image

    那么怎么做呢?我们用到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,
                     600,
                    height: 180,
                    openEffect: 'elastic'
                });
    
            });

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


  • 相关阅读:
    Flask快速入门(14) — 请求上下文2
    Flask快速入门(13) — 请求上下文1
    24 python异常机制
    11 python socket网络编程
    21 python调用外部系统命令
    10 python从键盘获取输入、刷新缓冲区
    18 python文件、目录操作
    17 python内置特殊方法
    15 python之ORM sqlalchemy模块使用
    14 python类的继承
  • 原文地址:https://www.cnblogs.com/joeylee/p/3246172.html
Copyright © 2011-2022 走看看