弹出容易

所属分类： JQ特效 UI 弹出层

查看演示立即下载

插件描述：具有重量轻的jQuery插件，是一个必须有任何开发人员可以轻松地创建模态窗口。应用蒙版到您的网页，打开一个可定制的模态窗口弹出，将焦点放在重要元素。

具有重量轻的jQuery插件，是一个必须有任何开发人员可以轻松地创建模态窗口。应用蒙版到您的网页，打开一个可定制的模态窗口弹出，将焦点放在重要元素。

使用步骤

HTML

包括脚本文件

包括当前版本的jQuery

<script type='text/javascript' src='js/jquery.modal.js'></script>
<script type='text/javascript' src='js/site.js'></script>

body中

<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
    <a href="#" class="closeBtn">Close Me</a>
    <!-- content here -->
</div>

CSS

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
}
.modal {
    display: none;
    background: #eee;
    padding: 0 20px 20px;
    overflow: auto;
    z-index: 1001;
    position: absolute;
    width: 500px;
    min-height: 300px;
}

JAVASCRIPT

$(document).ready(function() {
 
    $('.modalLink').modal({
 
        trigger: '.modalLink',
 
        olay: 'div.overlay',
 
        modals: 'div.modal',
 
        animationEffect: 'slidedown',
 
        animationSpeed: 400,
 
        moveModalSpeed: 'slow',
 
        background: '00c2ff',
 
        opacity: 0.8,
 
        openOnLoad: false,
 
        docClose: true,
 
        closeByEscape: true,
 
        moveOnScroll: true,
 
        resizeWindow: true,
 
        video: '/',
 
        close: '.closeBtn'
 
    });
 
});

如何使用多模态

要使用多模态在一个页面上，您必须同步触发您要打开的div的id的href属性。这个工程从一个开放的模态过渡到另一个相同。只需放置一个链接，你想离开href属性相匹配的ID下模态的模态。

href="#modal1"

如何使用视频

要使用托管或是Vimeo，YouTube上的视频等嵌入的iframe中的模态。然后通过插件的src属性的视频选项，并设置一类。类名是必需的元素，必须通过插件，当一个iframe嵌入，最好是设置为false的moveOnScroll。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery谷歌地图插件maplace.js
下一个特效： jQuery滑块的插件