jquery 弹出层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
#more{
text-decoration: none;
color: deepskyblue;
cursor: pointer;
}
#div{
z-index: 19891016;
width: 360px;
height: 240px;
top: 30.5px;
left: 400px;
margin: 0;
padding: 0;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.298039) 1px 1px 50px;
border-radius:3px;
display: none;
}
#close{
padding:11px;
width: 40px;
height: 20px;
cursor: pointer;
float: right;
color: #000;
display: block;
}
#shade {
z-index: 19891015;
background-color: #bdbdbd;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: fixed;
display: none;
}
#shade, #div {
position: fixed;
pointer-events: auto;
}
</style>
<body>
<a id="more" onclick="showDiv('ssddddddddd');" >查看更多 </a>
<div id="shade" >
<div id="div" class="layui-layer layer-anim" times="2" showtime="0" >
<span id="close" style="color:#000;" onclick="hideDiv();">
关闭
</span>
</br>
<p id="content" style="color:#000; padding:15px;"> </p>
</div>
</div>
</body>
<script>
function showDiv(content) {
$('#shade').css('display','block');
$('#div').css('display','block');
$('#content').html(content);
}
function hideDiv(div_id) {
$('#shade').css('display','none');
$('#div').css('display','none');
$('#content').html('');
}
</script>
<html>
<pre>内容换行
| <!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>无标题文档</title> | |
| <style type="text/css"> | |
| pre { | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <pre style="width:500px; overflow:hidden">此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示 | |
| 新 Div preprepr | |
| epreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepre</pre> | |
| </body> | |
| </html> | |
