function show(titleName, fileHtml){
$("#popup").remove();
var ajaxDiv = document.createElement('div');
$(ajaxDiv).load(fileHtml);
var button = document.createElement('button');
$(button).attr("type","button").html("close").bind("click",function (){$("#popup").remove()});
var container = document.createElement('div');
$(container).attr("id","popup").css("margin","0").css("padding","0");
$("body").append(container);
var headCont = document.createElement('div');
$(headCont).css("height","28px").css("background","blue");
$(headCont).css("overflow","hidden");
var headContLeft = document.createElement('div');
$(headContLeft).html("<b>" + titleName + "</b>");
$(headContLeft).css("float","left").css("paddingLeft","10px").css("lineHeight","28px");
$(headContLeft).css("color","#FFF")
$(headCont).append(headContLeft);
var headContRight = document.createElement('div');
$(headContRight).css("float","right");
$(headContRight).append(button);
$(headCont).append(headContRight);
$(container).append(headCont);
var bodyCont = document.createElement('div');
$(bodyCont).html(ajaxDiv);
$(bodyCont).css("padding","10px");
$(bodyCont).css("height","100px");
$(bodyCont).css("overflow", "auto");
$(container).append(bodyCont);
var Left = (window.innerWidth - $("#popup").width())/2;
$("#popup").css("top","45px").css("left",Left);
$("#popup").fadeIn("slow");
}
----------------------------------------------------------------------------
<!DOCtype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jScript</title>
<link rel="stylesheet" href="stils.css" type="text/css">
<script type="text/javascript" src="http://localhost/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="main">
<button onclick="show('nosaukums :)', 'ajax.html')"
name="subject"
type="button"
value="">POGA</button>
</div>
</body>
</html>
-------------------------------------------------------------------------------
#main{
width:885px;
height:1200px;
margin:auto;
overflow:hidden;
border:1px solid #c0c0c0;
}
#popup{
position:fixed;
z-index:99999;
width:500px;
border:1px solid #c0c0c0;
padding:10px;
display:none;
box-shadow: 1px 2px 2px #CCC;
background:#efefef;
}
Комментариев нет:
Отправить комментарий