jquery css div (弹出)显示隐藏层

css代码段

.crm_tc_bg {
width: 100%;
height: 100%;
position: fixed;
display: block;
top: 0;
left: 0;
background: #000;
filter: apha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index: 1000;
}
.crm_tc_box {
width: 300px;
min-height: 200px;
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
display: block;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -100px;
z-index: 1001;
background: #fff;
}

html代码 默认不显示隐藏层

<div id="card_popup" style="display: none">
<div class="crm_tc_bg"></div>
<div class="crm_tc_box">
    <h3><!--<span>名称</span>--><img src="image/closed_ico.png" class="close_ico"></h3>
    <div class="tableForm_wrap">
        弹出文本框内的提示文字。
    </div>
    <div class="tableForm_wrap_p"><p><a href="#" class="close_ico">确认</a></p></div>
</div>
</div>

js (jquery)代码  显示隐藏层

$(‘#card_popup‘).removeAttr("style")

js (jquery)代码  关闭隐藏层

<script type="text/javascript">
     $(document).ready(function() {
        $(".close_ico").click(function(e) {
            $(‘#card_popup‘).hide();
        });
        });
        </script>    
时间: 2024-10-31 03:53:53

jquery css div (弹出)显示隐藏层的相关文章

Jquery+div+css实现弹出登录窗口

基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

jQuery点击弹出层,弹出模态框,点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

jquery实现弹出可移动层代码

iframe.html页面 <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹窗显示</title></head><body><div id="container" style="overflow:hidden;"

jQuery 插件开发——PopupLayer(弹出层)

导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时间的工作概要吧. 就我在开发过程中的理解和开发的经验,一般常用的弹出层有三类(其实还有一类就是弹出可以输入内容的,但是这种可以被替代,所以就特别拿出来写了):Confirm.Alert.LoadContent(url).其中Alert又可以分成五种(当然也可以是四种),分别是: "error&quo

纯JavaScript+HTML+CSS 的div弹出框

CSS <style> .mask { width:100%; height:100%; position: absolute; top:0; left:0; filter: alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; background-color: #ffffff; z-index:2; display: none; } div.sample_popup { height:auto; border:10px solid #64646

jquery 点击弹出层自身以外的任意位置,关闭弹出层

<!--弹出层---> <div class="mask">    <div class="wrap"></div> </div> /***弹出层效果***/ $(".header").find(".a5").click(function(e){ e.stopPropagation();//阻止冒泡 $('.mask').css("display"

旁门左道通过JS与纯CSS实现显示隐藏层

想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.  1.    通过纯CSS实现. 该方法最简单,最粗暴. 这是部分HTML代码. <div class="myfriends" >     我的好友     <div class="myfriendsList" >         <ul>        

div弹出层的效果带关闭按钮

下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .tcck { width: 440px; height: 132px; border: 1px solid #6E665A; border-radius: 5px; background: #fff; padding-top: 10px; position: absolute; z-index: 9999999