Hi i am trying to make a popup but it is really annoying me, the form dont show, and the form has to have an display of iniline-block when the form is visible… i cant get this to work
HTML
<div id="contactwrap">
<p class="con-hl">Contact form</p>
<select id="subject" name="os">
<option selected="#" value="#">Submit content</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
</select>
<br/>
<input id="name" class="input" name="name" type="text" value="" size="20" placeholder="Username" /><br />
<br/>
<input id="email" class="input" name="email" type="text" value="" size="20" placeholder="E-mail" /><br />
<br/>
<input id="email" class="input" name="email" type="text" value="" size="20" placeholder="Link" /><br />
</br>
<textarea name="comments" id="comments2" rows="10" cols="25" placeholder="Your story..."></textarea>
</br>
<div id="close_btn" title="Close"></div>
</div>
<div id="cont_bg"></div>
JAVASCRIPT
$(document).on('click', '#testing', function(){
$('#contactwrap ').html('');
$('#contactwrap').fadeIn(180);
$('#cont_bg').fadeIn(200);
});
$(document).on('click', '#close_btn', function(){
$('#contactwrap').fadeOut(200);
$('#contactwrap').html('');
$('#cont_bg').fadeOut(180);
});
$(document).on('click', '#cont_bg', function(){
$('#close_btn').click();
});
CSS
#contactwrap{
background-color: rgba(0, 0, 0, 0.8);
padding-top:10px;
margin-top:25px;
margin-bottom:25px;
border:2px solid #000;
height:0 auto;
display:none;
float:none;
position:relative;
}
#cont_bg{
display: none;
position: fixed;
width:100%;
height:100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
}
.con-hl{
color:#ffffff;
font-weight: bold !important;
font-family: 'Passion One', cursive;
text-shadow: 2px 2px 8px #000;
font-size:33px;
float:none;
width:auto !important;
margin-top:5px !important;
margin:0 auto;
height:auto !important;
border-bottom:2px solid black;
}
#subject{
margin:10px;
}
Hi @demmacs , you’re clearing the entire content of #contactwrap with
$('#contactwrap ').html('');
… so nothing will show but an empty div.
1 Like
PaulOB
April 5, 2016, 12:29pm
3
m3g4pOp beat me to it but here’s a rough working example using mostly your code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#contactwrap {
display:none;
position:relative;
z-index:1000;
}
.formcontent {
background-color: rgba(0, 0, 0, 0.8);
padding:10px;
margin:0 25px;
border:2px solid #000;
display:table;
margin:auto;
}
#cont_bg {
display: none;
position: fixed;
width:100%;
height:100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
}
.con-hl {
color:#ffffff;
font-weight: bold !important;
font-family: 'Passion One', cursive;
text-shadow: 2px 2px 8px #000;
font-size:33px;
float:none;
width:auto !important;
margin-top:5px !important;
margin:0 auto;
height:auto !important;
border-bottom:2px solid black;
}
#subject {
margin:10px;
}
#contactwrap input {
margin:0 0 10px;
}
</style>
</head>
<body>
<div id="testing">Click me</div>
<div id="contactwrap">
<div class="formcontent">
<p class="con-hl">Contact form</p>
<select id="subject" name="os">
<option selected="#" value="#">Submit content</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
<option value="#">Something</option>
</select>
<br>
<input id="name" class="input" name="name" type="text" value="" size="20" placeholder="Username" >
<br>
<input id="email" class="input" name="email" type="text" value="" size="20" placeholder="E-mail" >
<br>
<input id="email" class="input" name="email" type="text" value="" size="20" placeholder="Link" >
<br>
<textarea name="comments" id="comments2" rows="10" cols="25" placeholder="Your story..."></textarea>
</br>
<div id="close_btn" title="Close"></div>
</div>
</div>
<div id="cont_bg"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on('click', '#testing', function() {
//$('#contactwrap ').html('');
$('#contactwrap').fadeIn(180);
$('#cont_bg').fadeIn(200);
});
$(document).on('click', '#close_btn', function() {
$('#contactwrap').fadeOut(200);
//$('#contactwrap').html('');
$('#cont_bg').fadeOut(180);
});
$(document).on('click', '#cont_bg', function() {
$('#close_btn').click();
});
</script>
</body>
</html>
I assumed that the form should be on top of the background and not under it as in your example. You should also revise your use of !important as that seems like a quick fix to avoid a specificity issue.
2 Likes
This works, the problems now is that the content is not on top of the rest of the page and when i click the background the popup do not close
PaulOB
April 5, 2016, 2:30pm
5
That isn’t true for the working example I posted above as I adjusted the z-index of the form so it was on top. Clicking the background will close the popup…
You will need to post your example in full or set up a codepen or fiddle.
I just had to make a few adjustments in the css, now everything works as it should
Thanks for the help with all of it!!
Real quick, how do i make the text boxes and the option box appear in the middle of the div?
Thanks
PaulOB
April 5, 2016, 3:31pm
8
HI,
If you mean the text inputs and selects themselves then a text-align:center on the parent (#contactwrap ) should centre them.
If that’s what you meant
Sssshhhhhhhh, i mean no that was defenetly not what i ment …
PaulOB
April 5, 2016, 4:04pm
10
Can you explain what you want then
Or did you mean that you wanted the whole form centred horizontally and vertically in the browser window?
system
July 5, 2016, 11:14pm
13
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
