Pop Easy轻巧的modal弹出层插件

Pop Easy轻巧的modal弹出层插件

分享一个收费的国外的popeasy弹出层插件,但已被我破解了哈,现在免费了呢,modal代码简单,而且功能强大,关键是插件的文件很小,只有2kb

淘建站为您提供更多_悬浮层/弹出层_弹窗_modal_模态框,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 420 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:悬浮层/弹出层 > 弹窗 难易程度:

引入popeasy弹出层modal插件

<script src="js/jquery.min.js"></script>
<script src='js/jquery.popeasy.js'></script>

演示一:单一模态

点击按钮必须加上class='popeasy',href目标#modal1

<a href="#modal1" class="popeasy">
    <div class="demos">
        <h2>单一模态</h2>
        <img src="images/singlemodal.png" alt="">
    </div>
</a>

目标#modal1

<div id="modal1" class="modal">
    <h1>Upgrade Now</h1>
    <a href="#" class="closeBtn btn"></a><br />
    <img src="images/upgrade.png" alt="" width="122" height="122" />
    <h2>Receive 500MB of Storage</h2>
    <p>$24.99 a month for a Limited Time</p>
    <input class="submitBtn btn" type="submit" value="Upgrade Now" />
</div>

演示二:动作模态

<a href="#modal2" class="popeasy">
    <div class="demos">
        <h2>动作模态</h2>
        <img src="images/linking.png" alt="">
    </div>
</a>
<div id="modal2" class="modal">
    <h1>Log In</h1>
    <a href="#" class="closeBtn btn"></a>

    <form action="#" method="post">
        <input type="text" value="username" />
        <input type="text" value="password" />
        <a class="popeasy" href="#fpassModal">Forgot Password?</a>
        <input class="submitBtn btn" type="submit" value="Submit" />
    </form>
</div>

调用popeasy插件

$(".popeasy").popeasy({trigger: ".popeasy", olay: ".overlay", modals: ".modal", loadExternal: !1, animationEffect: "fadeIn", animationSpeed: 400, moveModalSpeed: "slow", background: "19aae4", maskOpacity: .8, modalOpacity: 1, openOnLoad: !1, docClose: !0, closeByEscape: !0, moveOnScroll: !0, resizeWindow: !0, videoClass: "video", close: ".closeBtn"})

popeasy中文API

参数 描述 默认值
trigger id或类的链接或按钮来触发模式 .popeasy
modals 模态的id或类 div.modal
animationEffect 滑动slideDown 或 淡入淡出fadeIn slidedown
moveModalSpeed 模态窗口缩放时的速度 slow
maskOpacity 不透明度 0.8
openOnLoad 是否打开页面初始化加载模态层 false
closeByEscape 是否通过escape键关闭模态层 true
resizeWindow 当网页窗口改变大小时,是否居中显示modal模态层 true
close id或类的关闭按钮 .closeBtn

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/473.html
Pop Easy轻巧的modal弹出层插件 希望对你有帮助,感谢您的支持!
  • 原生js简单悬浮模态框的实现

    原生js简单悬浮模态框的实现

  • Moa Modal一款轻巧的modal弹出层插件

    Moa Modal一款轻巧的modal弹出层插件

  • 通用的boostrap弹出层

    通用的boostrap弹出层

  • Custombox+bootstrap演示20种不同的手机响应式弹出层modal特效

    Custombox+bootstrap演示20种不同的手机响应式弹出层modal特效

  • jQuery比bootstrap效果还帅的响应式模态窗口弹出层

    jQuery比bootstrap效果还帅的响应式模态窗口弹出层

  • jQuery+Ajax打开弹出分页层并保存多选框选中数据

    jQuery+Ajax打开弹出分页层并保存多选框选中数据

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2