Question

我一直试图为我的网站制作一个弹出窗口。实际弹出窗口的父div类设置为opacity:0.65。但是，html没有显示出预期的效果。我希望弹出窗口以透明背景为中心，根本不会发生。

CSS： -

.subket {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
.sub_con {
max-width:350px;
background-color:#FFF;
border-radius: 5px;
border: 1px solid #00A1E0;
padding:5px;
height:auto;
overflow:visible;
position: fixed;
}

HTML： -

<div class="subket">
<div class="sub_con">
<h2>Subscribe to our e-mail!</h2>
<form>
<input placeholder="Enter your e-mail address..."/><button></button>
</form>
</div>
</div>

JSFIddle

Answer 1

首先放

margin: auto;

代表.sub_con

并删除

position:fixed;

而不是opacity用于.subket，使用

rgba(17, 17, 17, 0.65);

fiddle

Answer 2

这里检查一下我添加了jquery：

$(function(){
    $('.sub_con').hide();
    $('.popup').click(function(){
      $('.sub_con').toggle();   
    });
});

.subket {
     background-color: rgba(17, 17, 17, 0.65);
     z-index: 9001;
     width:100%;
    height: 100px;
}

.sub_con {
    width:350px;
    background-color:#FFF;
    border-radius: 5px;
    border: 1px solid #00A1E0;
    padding:5px;
    height:auto;
    margin: auto;    
}

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<div class="subket">
    <div class="sub_con">
      <h2>Subscribe to our e-mail!</h2>
      <form>
        <input placeholder="Enter your e-mail address..."/><button></button>
      </form>
    </div>
    <button class="popup">popup</button>
</div>

使弹出背景透明而不淡化弹出窗口

2 个答案: