Сделать всплывающее окно прозрачным без выцветания всплывающего окна

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>