Css 引导模式甚至在调用它之前就阻止了底层元素

我的引导模式甚至在调用底层页面之前就阻止了它的内容。如果显示的屏幕截图下方有链接，则在调用modal之前无法访问该链接。它充当一个层。一旦调用了modal，我们就可以再次访问底层元素

访问模式前：

一旦访问模式：

这是我在

show.html.erb

中的代码。如何应对？我们是否需要在文档中保留模式代码

 <!-- Modal for uploading Profile Image -->
<div class="modal fade" id="myPicUploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
        <h4 class="modal-title" id="myModalLabel">Upload Picture</h4>
      </div>
      <div class="modal-body">
       <!-- Showing Exisiting Profile Image -->
        <% if @user.avatar.present? %>
         <%= image_tag @user.avatar.url(:profile), class: "img-thumbnail" %>
        <%else%>
         <%= image_tag "missing-profile.png", class: "img-thumbnail" %>
        <%end%>
       <p> </p> 
      <!-- Form to upload new pic -->
       <%= simple_form_for @user do |f| %>
        <%= f.input :avatar, label: false %>
       </div>
      <div class="modal-footer">
        <%= f.submit "Save", class: "btn btn-primary" %>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <%end%>  
      </div>
    </div>
  </div>
</div> 

<div ng-controller = "userLeftPanelCtrl" ng-init = "init()">
<!-- Left Panel of User -->
 <div class="well UserProfileLeftPane span2" >
  <!-- Panel options of User --> 
   <!-- Profile image of user -->
    <div class="UserProfileImageLeftBar">
     <% if @user.avatar.present? %>
      <%= image_tag @user.avatar.url(:profile), class: "img-thumbnail" %>
     <%else%>
      <%= image_tag "missing-profile.png", class: "img-thumbnail" %>
     <%end%>
     <%= link_to '#' do %>
      <span class="label label-primary" data-toggle="modal" data-target="#myPicUploadModal" >Upload Pic</span>
     <%end%>
    </div>
   </div>
  </div>

&时代；
上传图片

接近
上传图片

您是否尝试过隐藏并仅在激活时显示？ 像这样：

.modal-body,
.modal-footer {
    display: none;
}

当激活时，将其设置为：

.modal-body.active,
.modal-footer.active {
    display: block;
}

---

模态代码在HTML中的位置并不重要，因为

。模态

类应将CSS显示

属性

设置为

none

（不占用空间）

代码中的某些内容（Javascript或CSS）在初始化时将CSS显示

属性设置为
block
。可能是通过内联CSS（添加style=“display:block”），因为关闭了模式，这将删除
style=“display:block”
以解决您的问题。请注意，在初始化时，由于将
不透明度设置为
0
的
.fade
类，即使将显示设置为block，模式也不可见

您必须找出代码中的内容，将CSS显示
属性设置为
块
我将
$（'.modal'）.hide（）模式初始化后。虽然有很多方法可以解决这个问题，但还是很有效。
谢谢你，苏扎。激活已工作，将激活的伪元素应用于模态复选框结构。很好，它可以处理情态动词串。下面将删除页面块，但保留模态

label { cursor: pointer; text-align: center; width: initial; }
label:hover { color: dodgerblue; cursor: pointer; }
input#modal1, input#modal2 { left: -200%; position: absolute; top: -200%; }
input#modal1:checked + .modal1, input#modal2:checked + .modal2 { opacity: 1; z-index: 0; }
.modal1, .modal2 { background: white; border-bottom: white solid 1rem; border-radius: 1rem; bottom: 0; height: 70vh; left: 0; margin: auto; overflow: scroll; padding: 5vmin; position: absolute; right: 0; text-align: center; top: 0; width: 70vw; z-index: -99; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: 0 0 5vmin lightgray; box-shadow: 0 0 5vmin lightgray; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }
.modal1:active, .modal2:active { display: table; z-index: 99; }

<label for="modal1">Modal1</label>
<input type="checkbox" id="modal1" />
<article class="modal1">stuff</article>

<label for="modal2">Modal1</label>
<input type="checkbox" id="modal2" />
<article class="modal2">stuff</article>

标签{光标：指针；文本对齐：中心；宽度：初始；}
标签：悬停{颜色：道奇蓝；光标：指针；}
输入#modal1，输入#modal2{左：-200%；位置：绝对；顶部：-200%；}
输入#modal1:checked+.modal1，输入#modal2:checked+.modal2{opacity:1；z-index:0；}
.modal1、.modal2{背景：白色；边框底部：白色实心1rem；边框半径：1rem；底部：0；高度：70vh；左侧：0；边距：自动；溢出：滚动；填充：5vmin；位置：绝对；右侧：0；文本对齐：中心；顶部：0；宽度：70vw；z-index:-99；-moz背景剪辑：填充框；-webkit背景剪辑：填充框；背景剪辑：填充框；-web工具包盒阴影：0 0 5vmin浅灰色；盒子阴影：0 0 5vmin浅灰色；-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；过滤器：Alpha（不透明度=0）；不透明度：0；-webkit转换：不透明度1s易用；-moz转换：不透明度1s易用；-ms转换：不透明度1s易用；-o转换：不透明度1s易用；转换：不透明度1s易用；}
.modal1:active、.modal2:active{display:table；z-index:99；}
模态1
（）

通过一个大量编写脚本的示例：
嘿，我尝试了几个地方。但是没有运气。我仍然不清楚为什么我的模式虽然隐藏了。但是显示在开发人员工具中，它确实阻止了它下面的内容。原因可能是什么。