jquery fancybox弹窗需要注意的问题

最新推荐文章于 2023-04-12 09:21:14 发布

summer_my_sunshine

最新推荐文章于 2023-04-12 09:21:14 发布

阅读量3k

点赞数

文章标签： jquery fancybox

要想使用fancybox做出弹窗效果，需要以下几个步骤：

第一步.引入fancybox样式文件与jQuery以及fancybox的js文件（注意link标签要把type和rel加上，以及jQuery.js文件要在fancybox.js文件之前，之前出错就是因为这个小细节没注意，蠢爆了）

<span style="white-space:pre">	</span><link href="css/fancybox.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.fancybox.js"></script>

第二步.编写html（一个是带a标签点击的，一个是要弹出的div）

<body>
        <div class="demo">
             <h4>Demo3：加载DIV，并固定在浏览器中央</h4>
             <p><a id="showdiv" href="#inline" title="显示一个DIV内容">点击这里</a>加载本页中一个隐藏的DIV。</p>
        </div>


        <div style="display:none">
             <div id="inline" style="width:400px; height:160px; overflow:auto;">
                <p>
                    <img src="images/example/s1.gif" alt="" style="float:left; margin:4px" />
                    我们在设计WEB前端时，从前端交互设计的角度考虑，如何使用让产品易用，有效而让人愉悦的技术，了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。
                </p>
                <p>交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期，不带给他们任何的意外。一切都在用户的意料之中。
                </p>
             </div>
        </div>
    </body>

第三步. 在页面中编写jq语句调用fancybox

<script type="text/javascript">
            $(document).ready(function(){
                $("#showdiv").fancybox();
            });
</script>

（这样就可以把弹窗效果做出来啦~第一次做记录一下，怕自己以后忘了

虽然看着很简单，但是我却研究了好久，后面还是问了老大才帮我把这些小问题改过来了多学习学习学习）

summer_my_sunshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery fancybox弹窗需要注意的问题

要想使用fancybox做出弹窗效果，需要以下几个步骤：第一步.引入fancybox样式文件与jQuery以及fancybox的js文件（注意link标签要把type和rel加上，以及jQuery.js文件要在fancybox.js文件之前，之前出错就是因为这个小细节没注意，蠢爆了）第二步.编写html（一个是带a标签点击的，一个是要弹出的di
复制链接

扫一扫