Question

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

访问模态之前：

enter image description here

访问模态后

enter image description here

以下是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>

Answer 1

我在初始化模式后放了$('.modal').hide();。虽然有很多方法可以解决这个问题，但仍然有效。

Answer 2

模式代码在HTML中的位置无关紧要，因为.modal类应将CSS显示property设置为none（不占空间）。

代码中的某些内容（Javascript或CSS）在初始化时将CSS显示property设置为block。可能是内联CSS（添加style =“display：block”）因为关闭了模态，删除style="display:block"解决了你的问题。请注意，在初始化时，即使显示已设置为阻止，模式也不可见，因为.fade类将opacity设置为0。

您必须在代码中找出CSS显示property到block的内容。

Answer 3

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

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

并在激活时将其设置为：

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

Answer 4

谢谢，苏扎。主动工作，将主动伪元素应用于模式复选框结构。很好，可以使用模式字符串。以下操作会删除页面块，但会使模式运行。

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>

“展示”权重应用于身体元素，而不是孤立的模态类-模态类对z-index样式敏感

element：可以主动显示-z-index技巧需要该表（通过调整模式的左下-右-top和高度-宽度来隔离z-index-框的位置显示了（意外的）按比例缩放的尺寸模态，因此DISPLAY处于焦点nix位置和焦点z-index

我的应用程序用于弹出信息卡-没有modal：active技巧，无效（不可见）模式位于页面顶部，阻止用户访问页面链接-就此主题而言，这意味着访问使用我们的布局也无法访问页面上链接的按钮

使用'FontAwesome'图标作为页面背景的“麻烦”-解析方式类似，除非您想阻止内容盗窃（感谢fa）

参考此：

https://designshack.net/preview/37934（https://designshack.net//tutorialexamples/cssmodal/index.html）

带有大量脚本示例：http://subtlepatterns.com/retina-wood/

Bootstrap模态甚至在它被调用之前就会阻塞元素

4 个答案: