使弹出窗口背景透明而不会退出弹出窗口

我一直在尝试为我的网站创建一个弹出窗口。实际弹出窗口的父级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

来源

2015-05-13 user1928108

在你的小提琴中没有javascript。 – Brino

弹出我只使用显示和隐藏js，这在这里是不相关的。我上面粘贴的代码只是弹出代码。上面的代码是'onclick'发生时弹出的东西。所以，我希望subket透明，而不使sub_con透明。 – user1928108

先放

margin: auto;

为.sub_con

，并删除

position:fixed;

而不是使用opacity为.subket的，使用

rgba(17, 17, 17, 0.65);

fiddle

来源

2015-05-13 02:54:35 AmmarCSE

感谢您的帮助！我不得不做更多的编辑，然后它完美地工作。特别感谢rgba代码。 – user1928108

这里检查这个我用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>

来源

2015-05-13 04:50:54 Vinayak

使弹出窗口背景透明而不会退出弹出窗口

回答

相关问题