Question

我只使用CSS和HTML创建了一个弹出窗口，它可以正常工作，我需要这里是代码

＆＃13;

              .wrap {


                padding: 40px;


                text-align: center;


              }


              hr {


                clear: both;


                margin-top: 40px;


                margin-bottom: 40px;


                border: 0;


                border-top: 1px solid #aaaaaa;


              }


              h1 {


                font-size: 30px;


                margin-bottom: 40px;


              }


              p {


                margin-bottom: 20px;


              }


              .btn {


                background: #428bca;


                border: #357ebd solid 1px;


                border-radius: 3px;


                color: #fff;


                display: inline-block;


                font-size: 14px;


                padding: 8px 15px;


                text-decoration: none;


                text-align: center;


                min-width: 60px;


                position: relative;


                transition: color .1s ease;


              }


              .btn:hover {


                background: #357ebd;


              }


              .btn.btn-big {


                font-size: 18px;


                padding: 15px 20px;


                min-width: 100px;


              }


              .btn-close {


                color: #aaaaaa;


                font-size: 30px;


                text-decoration: none;


                position: absolute;


                right: 5px;


                top: 0;


              }


              .btn-close:hover {


                color: #919191;


              }


              .modal:before {


                content: "";


                display: none;


                background: rgba(0, 0, 0, 0.6);


                position: fixed;


                top: 0;


                left: 0;


                right: 0;


                bottom: 0;


                z-index: 10;


              }


              .modal:target:before {


                display: block;


              }


              .modal:target .modal-dialog {


                -webkit-transform: translate(0, 0);


                -ms-transform: translate(0, 0);


                transform: translate(0, 0);


                top: 20%;


              }


              .modal-dialog {


                background: #fefefe;


                border: #333333 solid 1px;


                border-radius: 5px;


                margin-left: -200px;


                position: fixed;


                left: 50%;


                top: -100%;


                z-index: 11;


                width: 360px;


                -webkit-transform: translate(0, -500%);


                -ms-transform: translate(0, -500%);


                transform: translate(0, -500%);


                -webkit-transition: -webkit-transform 0.3s ease-out;


                -moz-transition: -moz-transform 0.3s ease-out;


                -o-transition: -o-transform 0.3s ease-out;


                transition: transform 0.3s ease-out;


              }


              .modal-body {


                padding: 20px;


              }


              .modal-header,


              .modal-footer {


                padding: 10px 20px;


              }


              .modal-header {


                border-bottom: #eeeeee solid 1px;


              }


              .modal-header h2 {


                font-size: 20px;


              }


              .modal-footer {


                border-top: #eeeeee solid 1px;


                text-align: right;


              }

＆＃13;

<div class="wrap">
  <a href="#modal-one" class="btn btn-big">pop up!</a>
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Modal in CSS?</h2>
      <a href="#" class="btn-close" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      <p>One modal example here! :D</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Nice!</a>
    </div>
  </div>
</div>

＆＃13;

Jsfiddle

我的问题当我点击弹出整个页面向下滚动到底部并弹出时出现因为我的页面中有很多内容

我需要在同一个地方打开弹出窗口我不希望页面向下滚动可以帮助一些人帮忙吗？

注意当您尝试使用上述代码时，您只能找到滚动位但在我的页面中它滚动到页面底部

Answer 1

我不知道我是否理解正确，但尝试添加类似的东西：

body.unscrollable { overflow:hidden; }

并在模态打开时添加类.unscrollable。它将禁用网站主体上的滚动。

CSS弹出错误

Jsfiddle

1 个答案: