jQuery弹出层弹出关闭特效代码



43 169 57



特效描述:jQuery 弹出层弹出关闭,jQuery弹出层弹出关闭特效代码

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

2. HTML代码

<!--点击按钮-->
<center><br><br><br>
	<a href="javascript:void(0)" class="click_pop">点击显示弹出框</a>
</center>
<!--遮罩层-->
<div class="bgPop"></div>
<!--弹出框-->
<div class="pop">
    <div class="pop-top">
        <h2>课程介绍</h2>
        <span class="pop-close">X</span>
    </div>
    <div class="pop-content">
        <div class="pop-content-left">
            <img src="" alt="" class="teathumb">
        </div>
        <div class="pop-content-right">
            <p>课程名称:<b class="lname"></b></p>
            <p>课程价钱:<b class="price"></b></p>
            <p>上课时间:<b class="ltime"></b></p>
            <p>上课老师:<b class="teacher"></b></p>
            <p>老师简介:<b class="teasynopsis"></b></p>
            <p>课程简介:<b class="synopsis"></b></p>
        </div>
    </div>
    <div class="pop-foot">
        <input type="button" value="关闭" class="pop-cancel pop-close">
        <input type="button" value="报名" class="pop-ok">
    </div>
</div>
<script>
    $(document).ready(function () {
        $('.pop-close').click(function () {
            $('.bgPop,.pop').hide();
        });
        $('.click_pop').click(function () {
            $('.bgPop,.pop').show();
        });
    })
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到