jquery-fancybox使用

Mike_lucy

于 2023-04-12 09:21:14 发布

阅读量536

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/Mike_lucy/article/details/130099015

版权

<!-- 引入jquery -->
<script type="text/javascript" src="http://hti.cbcie.com/js/jquery-1.7.2.js"></script>
<!-- 引入fancybox的js、css -->
<link rel='stylesheet' type='text/css' href='http://hti.cbcie.com/js/fancybox1.3.4/jquery.fancybox-1.3.4.css' media='screen' />
<script src='http://hti.cbcie.com/js/fancybox1.3.4/jquery.fancybox-1.3.4.js'></script>
 
<!-- 弹窗启动事件 -->
<div><a href="#adddivtest" id="addbtndiv">fancybox弹窗</a></div>
 
<!--弹窗展示内容-->
<div style="display:none;">
    <div id="adddivtest">
 
        <div class="title">任务类型：</div>
        <div class="title">任务类型：</div>
        <div class="title">任务类型：</div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        /*弹出框js*/
        $("a#addbtndiv").fancybox({
            'autoDimensions': false,
            'centerOnScroll': true,
            'scrolling': false,
            'width': 600,
            'height': 350
        });
 
    });
</script>