您的位置:首页 > Web前端 > CSS

前端弹出框(js/css/html)

2017-12-04 16:41 531 查看
//html
<div class="blackCover">
     <div class="popContn">
                 <div class="popTitlen">LYNC大图片<a href="javascript:closePopUp()" class="close"></a></div>
                        <div class="popInnern">
                         <div class="popInnern_Content">
                         
                            </div>
                        </div>
                        <div class="popInnern_Shure">
                            <a class="btn_shure">确定</a>
                        </div>
                 </div>
           </div>
//css
.popContn{width: 650px; background: #fff;position: relative; margin:0 auto;margin-top: 60px; margin-bottom: 10px;border: 2px solid #0072C6; min-height:350px; -webkit-border-radius:5px; -moz-border-radius:5px;
border-radius:5px; overflow:hidden;}
.popTitlen{
 padding-left: 13px;
 height: 42px;
 line-height: 42px;
 font-size: 16px;
 color:#FFF;
 font-family:"微软雅黑", Arial, "黑体";
 font-weight:bold;
 position: relative;
 background-color: #0072C6;
}
.popTitlen .close{position: absolute;right: 10px;top: 8px;display: block;background:url(../images/close.png) no-repeat;width: 24px;height: 24px;}
.popInnern{padding:0px 15px; margin:10px 0px;overflow-y:auto; margin-left:20px; min-height:300px;}
.blackCover{position:absolute;width: 100%;height: 100%;background:url(../images/opacity.png); z-index:10000;left: 0;top: 0; overflow:auto;}
.popInnern_Content{
 width:100%;
 height:300px;}
.popInnern_Shure{
 width:100%;
 height:70px;
 line-height:70px;
 background:#e9e9e9;
 display:block;
 text-align:center;
 }
.popInnern_Shure a{
 margin-top:20px!important;
 }
.btn_shure{
 width:80px;
 height:2
a6ad
8px;
 text-align:center;
 line-height:28px;
 display:inline-block;
 background:url(../images/swx_ico_blue-button.png) no-repeat;
 font-size:14px;
 color:#fff;
 font-weight:bold;
 cursor:pointer;
 text-decoration:none;
 margin-right:10px;}
//js
function closePopUp(){
 $(".blackCover").hide();
 }
function openPopUp(){
 
 $(".blackCover").show();
 $(".blackCover").css("height",$(".mainRight").outerHeight());
 }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: