html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/shengji.css">
</head>
<body id="box">
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
购买
</button> -->
<!-- Modal -->
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display:block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div id="tan">
<div class="tana">
<ul class="a">喜 讯</ul>
<!--<ul class="b"><p>巨企联袂</p><p>爱购同湾</p></ul>-->
<ul class="c"><p>尊敬的i-Graal伙伴们：</p></ul>
<a href="http://www.igraal.shop/m/artshow.aspx?strId=143">
<ul class="d">
<p class="l">
十年砺霜刃<br> 感恩在路上一直有您同行！
今天小i给大家汇报特大喜讯：<br>
i-Graal2.0安卓版已经正式上线，Apple store（苹果端）正在上传审核中！
本次2.0系统版本升级内容请直击详情...</p>
</ul>
</a>
<ul class="m">
<p class="e">IGRAAL CHINA LIMITED</p>
<p class="f">2017年8月19日</p>
</ul>
<div style="clear:both;"></div>
<ul class="g">
<a class="ga" id="abc" data-dismiss="modal"><li>朕已阅</li></a>
<a href="http://www.igraal.shop/m/artshow.aspx?strId=143" class="gb"><li>直击详情</li></a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("body").css({
position: 'fixed',
top: '0'
});
$(".modal").css({
position: 'fixed',
top: '0',
});
$("#abc").click(function () {
$(".modal").hide();
$("body").css({
position: 'relative',
left: '0'
});
});
});
</script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
css
/*
* @Author: Administrator
* @Date: 2017-08-07 19:39:32
* @Last Modified by: Administrator
* @Last Modified time: 2017-08-24 09:39:20
*/
.modal{
100vw;
height: 100vh;
position: fixed;
z-index: 10000;
}
#tan ul,#tan li{
margin:0;
padding:0;
}
#tan{
position: relative;
background-image: url("../images/gg.png");
20em;
height: 30em;
margin:20% auto;
background-size: 100%;
z-index: 10000000;
overflow: hidden;
}
#tan .tana{
80%;
margin: 0 auto;
background-size: 100%;
z-index: 10000000;
}
#tan ul,#tan ul li{
text-decoration: none;
list-style: none;
}
#tan .a{
95%;
margin: 0 auto;
margin-top: 1.5em;
font: 1.5em 微软雅黑;
color:#ff4d37;
line-height: 2em;
text-align: center;
border-bottom: solid 2px #000;
}
#tan .b{
95%;
margin: 0 auto;
overflow: hidden !important;
}
#tan .b p{
font-size: 1.3em;
50%;
float: left;
color:#ff4d37;
line-height: 1.5em;
}
#tan .b p:first-child{
text-align: left;
}
#tan .b p:last-child{
text-align: right;
}
#tan .c p{
95%;
font: 1em 微软雅黑;
text-align: left;
margin: 0 auto;
line-height: 2em;
}
#tan .d{
100%;
}
#tan .l{
95%;
height:120px;
overflow:auto;
font: 1em 微软雅黑;
line-height: 1.8em;
text-align: left;
text-indent: 2em;
margin: 0 auto;
}
#tan .imm{
overflow:auto;
font: 1em 微软雅黑;
line-height: 2em;
text-align: right;
}
#tan .m{
margin-top: 1em;
margin-right: 1em;
position: relative;
80px;
height:80px;
background-image: url("../images/zhang.png");
background-size: 100%;
float: right;
}
#tan .e{
position: relative;
right: 12em;
250px;
margin-top: 1.5em;
font: 1em 微软雅黑;
line-height: 1em;
text-align: right;
}
#tan .f{
position: relative;
right: 12em;
250px;
font: 1em 微软雅黑;
line-height: 1em;
text-align: right;
}
#tan .g{
margin-top: 1em;
100%;
font-family: 微软雅黑
}
#tan a{
text-decoration: none;
color:#000;
}
#tan .g .ga{
48%;
float: left;
text-align: center;
border: solid 1px #000;
box-sizing:border-box;
}
#tan .g .gb{
48%;
float: right;
color: #ff4d37;
text-align: center;
border: solid 1px #ff4d37;
box-sizing:border-box;
}
#tan .g li{
line-height: 2em !important;
}