使彈出窗口背景透明而不會退出彈出窗口

我一直在嘗試爲我的網站創建一個彈出窗口。實際彈出窗口的父級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

使彈出窗口背景透明而不會退出彈出窗口

回答

相關問題