Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 创建一个模态？_Html_Css_Less - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 创建一个模态？

Html 创建一个模态？

html css less

Html 创建一个模态？,html,css,less,Html,Css,Less,我正在创建自己的模式，以下是我的CSS： .modal{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity

我正在创建自己的模式，以下是我的CSS：

.modal{

    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 999;

    .modal-content{
        margin: 60px auto;
        background-image:url('/static/img/background-modal.jpg');
        width: 700px;
        height: 700px;
        .box-shadow(0 10px 2px #999);
    }
}
以及HTML：

<div class="modal">
<div class="modal-content">
       My Modal
    </div>
</div>


我的情态
.modal指灰色背景，.modal内容指弹出的框

问题是，灰色背景仅覆盖浏览器窗口，当我向下滚动查看模式框的其余部分时，灰色背景停止，我可以看到我的页面内容

我可以用一个固定的位置来解决这个问题，但是你看不到.model content的全部内容。

我有一个决定要告诉你，它是用俄语描述的。它是一个jquery插件，但您只能使用样式

及

简而言之：当模态可见时，我们将
lock
类名添加到
body
元素（
body.lock{overflow:hidden}
-防止body滚动）

div.shim
是全屏模式背景（
position:fixed
），它具有
溢出：auto
，可以滚动模式内容（而不是正文内容）

HTML标记：

<html>
  <head>
    ...    
  </head>
  <body class="lock">
    <div class="shim">
      <div class="modal">
        ...
        <h1>Hi, I'm the modal demo.</h1>
        ...
      </div>
    </div>
    ...
  </body>
</html>


...    
...
嗨，我是模态演示。
...
...
（我不是以英语为母语的人，如果需要，请随时更正我的答案）

我有一个决定要告诉你，它是用俄语描述的。它是一个jquery插件，但您只能使用样式

及

简而言之：当模态可见时，我们将
lock
类名添加到
body
元素（
body.lock{overflow:hidden}
-防止body滚动）

div.shim
是全屏模式背景（
position:fixed
），它具有
溢出：auto
，可以滚动模式内容（而不是正文内容）

HTML标记：

<html>
  <head>
    ...    
  </head>
  <body class="lock">
    <div class="shim">
      <div class="modal">
        ...
        <h1>Hi, I'm the modal demo.</h1>
        ...
      </div>
    </div>
    ...
  </body>
</html>


...    
...
嗨，我是模态演示。
...
...
（我不是以英语为母语的人，如果需要，请随时更正我的答案）

替换
宽度：100%和<代码>高度：100%最小宽度为100%和<代码>最小高度：100%.modal
类，code>似乎可以解决您的问题

.modal {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    min-width:100%;
    min-height:100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 999;

    .modal-content {
        margin: 60px auto;
        background-image:url('/static/img/background-modal.jpg');
        width: 700px;
        height: 700px;
        .box-shadow(0 10px 2px #999);
    }
}
替换
宽度：100%和<代码>高度：100%最小宽度为100%和<代码>最小高度：100%.modal
类，code>似乎可以解决您的问题

.modal {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    min-width:100%;
    min-height:100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 999;

    .modal-content {
        margin: 60px auto;
        background-image:url('/static/img/background-modal.jpg');
        width: 700px;
        height: 700px;
        .box-shadow(0 10px 2px #999);
    }
}

您确实需要添加位置：固定到。当您向下滚动页面时，它将移动。然后，我会将.modal内容更改为：

.modal-content{ 
    position:absolute;
    margin: -350px 0 0 -350px;
    top:50%;
    left:50%;
    background-image:url('/static/img/background-modal.jpg');
    width: 700px;
    height: 700px;
    .box-shadow(0 10px 2px #999);
    z-index:1000;
}
您确实需要添加位置：固定到。当您向下滚动页面时，它将移动。然后，我会将.modal内容更改为：

.modal-content{ 
    position:absolute;
    margin: -350px 0 0 -350px;
    top:50%;
    left:50%;
    background-image:url('/static/img/background-modal.jpg');
    width: 700px;
    height: 700px;
    .box-shadow(0 10px 2px #999);
    z-index:1000;
}
你应该让“变灰”的div独立运行。像这样：

 <div class="modal"></div>
    <div class="modal-content">
       My Modal
    </div>


我的情态
然后固定灰显div的位置，我将模态内容div垂直和水平居中

但问题更多的是你的头发变白了

这里有一把小提琴：

您应该拥有自己的“灰显”div。像这样：

 <div class="modal"></div>
    <div class="modal-content">
       My Modal
    </div>


我的情态
然后固定灰显div的位置，我将模态内容div垂直和水平居中

但问题更多的是你的头发变白了

这是一把小提琴：

怎么样

HTML:

那怎么办

HTML:

你在使用sass，对吗？没有注明。你能做一个JSFIDLE吗？如果你给它一个最大高度并设置overflow属性，让内容可以滚动呢？你使用的是LESS还是SASS，如果不是，你就不能像那样嵌套CSS命令我想我们可以放心地假设他使用的是LESS还是SASS，因为他的问题不是“帮助我的CSS根本不工作”。
$（'.modal'）.CSS({height:$（document.height（）+'px'}）
您使用的是sass，对吗？没有说明。您可以制作一个JSFIDLE吗？如果您通过给内容一个最大高度并设置overflow属性来使内容可滚动，会怎么样？您使用的是较少还是sass，如果不是，您不能像那样嵌套CSS命令我想我们可以放心地假设他使用的是较少还是sass，因为他的问题不是“帮助我的css根本不工作”。
$（'.modal'）.css（{height:$（document.height（）+'px'））
我不知道你在说什么。无论如何，谢谢。这个演示允许用Chrome使用滚轮按钮滚动。我可以看到在模式下滚动的内容。@panthro看演示：点击
打开模式链接，在模式窗口中点击
添加更多内容
链接。我想，这就是你需要的。@DNT抱歉，我没有我没有带滚轮的鼠标，但在触摸板上无法滚动主体内容，滚动仅适用于模式窗口内容。我不确定你在说什么。无论如何，谢谢。此演示允许使用滚轮按钮使用Chrome进行滚动。我可以看到内容在模式下滚动。@panthro查看演示：单击
打开模式
链接，然后在模式窗口中单击
添加更多内容
链接。我想，这是您需要的。@DNT抱歉，我没有带滚轮的鼠标，但在触摸板上无法滚动正文内容，滚动仅适用于模式窗口内容。谢谢，这很有效，虽然用户滚动时我的基础页面会滚动，但我如何修复这个？我想不出用css做这个的方法，所以我想如果你能看到模态什么时候有一个可见的放置溢出：隐藏在主体上，否则就删除它：我不确定这是你的意思，因为你提到当你滚动时，你可以看到你的内容，但是现在你不想滚动。但是你知道我做了什么。是的，爱rflow hidden确实有效。虽然现在我相当大的模式没有滚动。知道如何使它滚动吗？看起来我完全误解了你。看看这个：谢谢，这是有效的，虽然我的底层页面现在在用户滚动时滚动，但我怎么能解决这个问题？我想不出一个用css实现的方法，所以我想如果你