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