最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

javascript九种自定义弹出层效果

来源:http://www.erdangjiade.com/ 沐浴春风 2016-02-24 19:12浏览(1540)

javascript弹出层插件支持点击触发js弹出层,鼠标滑过触发js弹出层,带动画animate效果的js弹出层,可自定义函数回调的js信息提示层,兼容ie的弹出层DEMO演示

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

javascript九种自定义弹出层效果
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

演示一:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。

<div id="emample1" class="example">
    <div id="ele1" class="tigger">触发元素1</div><div class="description">示例1:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。<br />new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});</div>
    <div class="clr"></div>
    <select>
        <option>ie6下能罩住我吗?</option>
    </select>
    <div id="blk1" class="blk" style="display:none;">
        <div class="head"><div class="head-right"></div></div>
        <div class="main">
            <h2>示例1,默认弹出层</h2>
            <a href="javascript:void(0)" id="close1" class="closeBtn">关闭</a>
            <ul>
                <li><a href="#">项目1</a></li>
                <li><a href="#">项目2</a></li>
            </ul>
        </div>
        <div class="foot"><div class="foot-right"></div></div>
    </div>
</div><!--emample1 end-->
new PopupLayer({
    trigger: "#ele1",
    popupBlk: "#blk1",
    closeBtn: "#close1"
});

其他8种请看演示DEMO

标签: 弹出层
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/797.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2