弹窗页面

最新推荐文章于 2022-06-08 09:55:42 发布

时光默

最新推荐文章于 2022-06-08 09:55:42 发布

阅读量853

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.youkuaiyun.com/zengyonglan/article/details/52609726

CSS 同时被 2 个专栏收录

22 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <meta content="" name="pgv">
    <title>静态页面</title>

    <script src="./jquery-1.8.2.min.js" type="text/javascript"></script>


    <link rel="stylesheet" type="text/css" href="./static.css">

</head>
<body>
    <div style="display:disabled;">
    <div class="grey_background"></div>
    <div class="tankuang_body">
      <div class="tankuang_inner">

        <div class="tankuang_hd">
          <div class="tankuang_tit">标题</div>
        </div>

        <div class="tankuang_bd">
          <p>内容。。。</p>
        </div>

        <div class="tankuang_btn">
          <div class="border-top"></div>
          <div class="border-left"></div>

          <a class="canclebtn">取消</a>
          <a class="okbtn">确定</a>
        </div>

      </div>
    </div>
  </div>
</body>
</html>

css

@charset "utf-8";
html{min-height:100%; font-size: 14px;}

body{font:14px/1.4 arial;color:#1a1a1a;-webkit-text-size-adjust:none;font-family:"Helvetica Neue","Microsoft Yahei","Hiragino Sans GB","Microsoft Sans Serif","WenQuanYi Micro Hei","sans-serif","Varela Round", "sans-serif" !important;background:#f0f0f0; }

/*grey background*/
.grey_background {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11111;
}

/*弹框整体放置位置*/
.tankuang_body {
    position: fixed;
    left: 0;
    right: 0;
    top: 18%;
    margin: 0 auto;
    max-width: 56rem;
    z-index: 2222222;
}

.tankuang_inner {
    background-color: #fff;
    padding: 0%;
    margin: auto;
    color: #000;
    border-radius: 10px;
    overflow: hidden;
    width: 70%
}

.tankuang_tit {
  line-height: 50px;
  color: #ffffff;
  font-size:18px;
  text-align:center;
  background-color: #00DBF5;
}

.tankuang_bd {
    padding-top: 15px;
    color: #000000;
    font-size: 14px;
    text-align: justify;/*justify两端对齐*/
}

.tankuang_btn .canclebtn,.tankuang_btn .okbtn {
    width: 49%;
    color: #00DBF5;
    font-size: 17px;
    display: inline-block;
    line-height: 50px;
}

p{
    padding: 10px 14px;
}

.p2{
    padding-top: 0px;
}

.tankuang_btn {
    text-align: center;
    position:relative;
    line-height: 50px;
}

.border-top{
    border-top: 1px solid #dbdbdb;
    position:absolute; 
    width: 100%;
}

.border-left{
    border-left: 1px solid #dbdbdb;
    position:absolute; 
    left:50%;
    height: 100%;
}