jquery-fancybox使用

最新推荐文章于 2024-07-19 16:02:49 发布

Mike_lucy

最新推荐文章于 2024-07-19 16:02:49 发布

阅读量436

点赞数

文章标签： javascript 前端 jquery

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

版权

该代码段展示了如何通过引入jQuery库和Fancybox插件创建一个点击后弹出的任务类型选择窗口。页面加载完成后，JavaScript代码会为指定的链接添加点击事件，触发一个固定尺寸、无滚动条的弹出框，显示包含多个任务类型的隐藏内容。

摘要由CSDN通过智能技术生成

<!-- 引入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>