Make popup background transparent without fading the popup

Question

I have been trying to make a popup for my website. The parent div class for the actual popup is set at opacity:0.65. But, the html doesn't show the desired effect. I want the popup centered in a transparent background which doesn't happen at all.

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

Here check this I have added with 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>

Answer 2

First put

margin: auto;

for .sub_con

and remove

position:fixed;

Instead of using opacity for .subket, use

rgba(17, 17, 17, 0.65);

fiddle