fancybox 最基本的使用步骤

时间:2022-10-31 18:37:01

初步使用
第一步 :引用js和样式

第二步 :设定要触发显示的元素(a标签,链接href指向div的id)
  <div><a href="#adddivtest" id="addbtndiv">测试</a></div>

第三步: 设定要触发后显示在面板里面的内容块(一般div,必须有2层包装)
   <div style="display:none;">
            <div id="adddivtest">
                <div class="title">任务类型:</div>
                <div class="title">任务类型:</div>
                <div class="title">任务类型:</div>
            </div>
        </div>

第四步:js加载时加载/*弹出框js*/(此时使用的id是a标签的id而不是div的id)
function () {
    /*弹出框js*/
        $("#addbtndiv").fancybox({
            'autoDimensions': false,
            'centerOnScroll': true,
            'scrolling': false,
            'width': 480,
            'height': 380
        });

}

------------此时最简单的面板已经可以触发并显示了,接下来就是面板中加载数据什么的了---------------