I am trying to implement multiple fullscreen modals on a single page, but I am facing an issue where they slide in and out at an angle instead of just fading in and out. I have been unable to achieve the desired effect of a simple fade transition.
If you have any suggestions or solutions, please feel free to share. Thank you.
You can find my code on jsfiddle: http://jsfiddle.net/mk9ek9wt/
HTML:
<li> <a href="#" class="open" data-target='A1'>test1</a></li>
<li> <a href="#" class="open" data-target='A2'>test2</a></li>
<div class="container A1">
<p>
<a href="#" class="close">close</a>
</p>
<p class="changeText">
content 1
</p>
</div>
<div class="container A2">
<p>
<a href="#" class="close">close</a>
</p>
<p class="changeText">
content 2
</p>
</div>
<div class="overlay"></div>
CSS:
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.container {
position:fixed!important;
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
color:white;
display:none;
z-index:1002;
padding:10px;
}
JavaScript:
$(document).ready(
function() {
$('.open').click(
function() {
var target=$(this).data('target');
$('.overlay').show('slow',
function() {
$('.container.'+target).fadeIn('slow');
}
);
}
);
$('.close').click(
function() {
$(this).parents('.container').hide('slow',
function() {
$('.overlay').fadeOut();
}
);
}
);
}
);