I am trying to make a simple Modal Box that can be minimzed to the bottom right of the screen so i can make it into a plugin but i cant get the simple CSS to work and position itself to the bottom right! Here is all the code you can instantly paste it and see the example work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Minimize Window</title>
<script src="http://www.fzilla.com/f/jquery"></script>
<style>
* {margin:0px; padding:0px;}
body {font-family: SegoeUI, Helvetica, Arial, sans-serif; font-size:14px;}
.window {position:fixed; height:auto; width:450px; border:1px solid #ccc; overflow:hidden;}
.window.minimized {height:50px; bottom:100px; right:50px;}
.window .top_bar {border-bottom:1px solid #ccc; padding:3px 5px;}
.window .top_bar .title {font-size:1.4em; font-weight:600;}
.window .top_bar .controls {font-weight:600; float:right;}
.window .top_bar .controls a {cursor:pointer; color:#666;}
</style>
<script>
$(document).ready(function(){
var initial_height = $(".window").height();
var windows_on = false;
$(".minimize").click(function(){
var t = $(this);
var tx = t.html();
if (tx == "[-]") {
// code when minimizing and putting to bottom right
windows_on = false;
t.html("[+]");
t.parents(".window").css({ "height": "50px", "bottom": "100px", "right":"50px" });
t.parents(".window").addClass("minimized");
} else {
// code when making bigger and centering
windows_on = true;
t.html("[-]");
t.parents(".window").removeClass("minimized");
t.parents(".window").css({ "height": "400" });
center();
}
});
$(window).resize(function(){ if (windows_on) { center() } });
var w, h, aw, ah, y, x;
function center() {
var t = $(".window");
w = t.width();
h = t.height();
aw = $(window).width();
ah = $(window).height();
y = (ah - h) / 2;
x = (aw - w) / 2;
t.css({"top":y, "left":x});
}
});
</script>
</head>
<body>
<div class="window minimized">
<div class="top_bar">
<span class="title">This is the title of our window</span>
<span class="controls"><a class="minimize">[+]</a></span>
</div><!-- top_bar -->
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, feugiat id interdum id, tempor id felis. Nam id imperdiet nulla. Nunc auctor turpis id lectus mollis vel vehicula mauris porta. Nullam cursus mi at turpis viverra sed euismod metus elementum. Integer imperdiet, felis sit amet rhoncus eleifend, nisi orci convallis libero, in iaculis mauris sapien vel est.</p>
<p> Morbi urna mi, dapibus vitae tincidunt in, commodo vel enim. In porta laoreet elit id vehicula. Proin id augue mauris, vel commodo diam. Fusce a metus et est porta fringilla at congue enim. Nulla elit ligula, aliquam sit amet bibendum vitae, rutrum ac quam. Nunc diam erat, condimentum sed sagittis sed, posuere eu mi. Etiam sit amet nibh vel massa faucibus dictum et vel metus. Sed gravida commodo neque eu euismod. Fusce eget orci sed lacus hendrerit porttitor.</p>
</div><!-- content -->
</div><!-- window -->
</body>
</html>
Any suggestions would help! Thanks!