Collapsable and Expandable jQuery Fixed Modal Box (Continue…)
Our Jquery Code that actually does the binding for click events and adjusting the CSS dynamically.
jq-fixed.js
$(document).ready(function() {
//Initialize our jquery actions
initialposition();
//If user decides to make no action
$("#mask").click(function(e){
$(this).hide();
resetmask();
});
function initialposition() {
//position the navigation bar at top initially
// when user clicks on that slide down and show other options
var id = $("a[name=modal]").attr('href');
var winH = $(window).height();
var winW = $(window).width();
//alert(id);
$('.clickme').css('position','absolute');
$('.clickme').css('top','780');
$('.clickme').css('left','7180');
$('.clickme').css('bottom','450');
$('.clickme').css('right','1');
$('.clickme').css('margin-left','390');
$('.clickme').css('padding','0');
//alert($('.clickme').html());
$(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080);
$(id).css('left',winW/2-$(id).width()/2);
$(id).html("
Show
");
$(id).show(1000);
}
$("#fullarticle").click(function(e){
showExpand(e);
});
//select all the a tag with name equal to modal
function showExpand(e) {
//$("a #btnsubmit").html("My Image :
");
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $("a[name=modal]").attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top',winH/2-winH/2-10-$(id).height()/3*0.060);
$(id).css('left',winW/2-$(id).width()/2);
$(id).slideDown(1000);
$(id).html("
Hide
");
$("#hidearticle").click(function(e){
resetpanels();
});
}
function resetmask() {
$('#mask').css({'width':'0','height':'0'});
//transition effect
$('#mask').fadeOut(1000);
//$('#mask').fadeTo("slow",0.8);
var id = $("a[name=modal]").attr('href');
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080);
$(id).css('left',winW/2-$(id).width()/2);
$(id).html("
Show
");
$(id).slideDown();
$("#fullarticle").click(function(e){
showExpand(e);
});
}
function resetpanels() {
var id = $("a[name=modal]").attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080);
$(id).css('left',winW/2-$(id).width()/2);
$(id).html("
Show
");
$(id).slideDown();
$("#fullarticle").click(function(e){
showExpand(e);
});
}
});