Я пытаюсь создать простой модальный блок, который можно свернуть в правом нижнем углу экрана, чтобы я мог превратить его в плагин, но я не могу заставить работать простой CSS и позиционировать себя справа внизу!Вот весь код, который вы можете мгновенно вставить и увидеть пример работы.
<!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>
Любые предложения помогут!Спасибо!