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: 99999999;

	display: none;

	left: 50%;/*FF IE7*/

	top: 50%;/*FF IE7*/

	margin-left: -220px!important;/*FF IE7 该值为本身宽的一半 */

	margin-top: -140px!important;/*FF IE7 该值为本身高的一半*/

	margin-top: 0px;

	position: fixed!important;/*FF IE7*/

	position: absolute;/*IE6*/

 _top:       expression(eval(document.compatMode && document.compatMode==‘CSS1Compat‘) ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.STYLE1 {font-size: 12px}
    </style>

  

<script type="text/javascript">
    //这是关闭弹出层的方法
    function closeCustomer() {

        document.getElementById("joinclub").style.display = ‘none‘;

        //document.getElementById("bg123").style.display = ‘none‘;

    }
    //这是弹出层的方法
    function join_club() {
         //主要是这句话控制弹出层。
        document.getElementById(‘joinclub‘).style.display = ‘block‘;
    }

</script>

  

 <%--进度条弹出窗口--%>
    <div class="tcck" id="joinclub" style="display:none">
        <table style="width:430px; height:7px;"  border="0" cellpadding="0" cellspacing="0"   >
            <tr style="background-color:white; color: #fff; padding-left: 2px; padding-top: 0px;
                     font-weight: bold; font-size: 12px;" >

                <td><div align="right"><a href=JavaScript:; class="STYLE1" onclick="closeCustomer();">[关闭]</a>     </div></td>
</tr>
            </table>
 <%--下面这些是弹出窗口里面的内容--%>
    <div id="progress1">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
    <div ><h3 id="xzts"></h3></div>
<%--以上这些是弹出窗口里面的内容--%>
</div>

  

  

时间: 2024-11-09 05:30:06

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

html+javascript实现可拖动可提交的弹出层对话框效果

本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3

简单易用的Div弹出层

<html> <head> <title>showdiv</title> <!--这是样式--> <style type="text/css"> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: gray; z-index:1001; -

关于div弹出层的实际应用心得

今天本人要做一个点击弹出的功能,因为这个功能是最后做的,所以写的时候很纠结, 因为本人小菜一枚, 开始尝试用 position:relative:来做一试不行呀 ,因为用这个来做的话 会打乱原有的布局, 然后我就又尝试 absolute 来做,其实用绝对定位是正确的 可是我当时犯蒙,把弹出框放在html最后面 然后定位用了 top 还有left,结果absulute虽然不会影响布局 可是位置是死的,好了 不屁话了 直接上正确的方式. 对了 最后我被气的好考虑过用js来做  先获取一个可以随着浏览

居中的div弹出层

css .form-f { position: fixed; left: 50%; top: 50%; width: 940px; max-height: 620px; min-height: 273px; margin-top: -310px; margin-left: -470px; background-color: #fff; border-radius: 5px; z-index: 99; overflow: hidden; display: none; } 部分属性说明: left:

设置div弹出层显示隐藏效果

----页面div <div id="show_scfsxz"  style="display:none;zindex:1000;position:absolute;left:850px;top:28px;border:1px solid #06c;padding:0px;background:#C7DEF8;"> <br/>       <span>上传方式: <input type="radio" v

div滚动条弹出层效果

<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none"> <table style="width:430px; height:7px;" border="0" cellpadding="0" cellspacing="0" > <tr style=&

ASP.NET—013:实现带控件的弹出层(弹出框)

在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法showModalDialog("新页面相对路径+?参数1&参数2",window,"新页面样式");然后会新弹出一个模态的page页.而在有些时候,仅仅是显示一些单一的.少量的数据,或者一些简单的操作时.就没必要使用新弹出页面了.此时,最好使用弹出层,也就是数据还是显示在当前页面的某个控件上,然后通过JS方法实现达到弹出的目的.看下面的例子: <html xmlns="http:

Javascript实现页面弹出层效果

弹出层效果是一个很实用的功能,很多网站都采用了这种方式实现登录和注册,比如百度: 弹出层的特点:点击登录或注册的时候在页面的中间部分弹出一个登录或注册区域并且页面有一个遮罩层,而且登录框在遮罩层之上,也就是登陆框的z-index值要大于遮罩层的z-index值.当点击关闭或者遮罩层时关闭登录或者注册框(有的网页没有实现点击遮罩层关闭登录或注册区域的功能.). 最近也做了一个类似的弹出层的效果,先展示一下最终效果: 简单的说一下实现的过程. 首先是遮罩层.遮罩层是在页面动态加载的过程中创建的,因为

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

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