Clever Geek Handbook

Bootstrap modal blocks base elements even before it's even called

My bootstrap modal blocks the content of the base page even before it is called. If there is a link below the screenshot shown, it cannot be accessed until the modal is called. It acts like a layer. After calling the modal again, we can access the base elements.

Before accessing the modal:

enter image description here

enter image description here

After accessing Modal:

enter image description here

Here is my code in show.html.erb

. How to deal with this? Is there some specific place to store our modal code in our document?

 <!-- 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>
+3


source to share


4 answers


I put $('.modal').hide();

after modal initialization. Works, although there are many ways to fix it.



+3


source


The place of the modal code in your HTML doesn't matter, because the class .modal

has to set the CSS mapping property

to none

(which doesn't take up space).

Something in your code (Javascript or CSS) will set the CSS display property

to block

on initialization. Perhaps with inline CSS (adding style = "display: block") due to closure modals that remove style="display:block"

solves your problem. Note that on initialization, the modal view is not displayed even when the display has been set to lock due to the class .fade

that sets opacity

to 0

.



You will need to find out that in your code, set the CSS mapping property

to block

.

+1


source


Have you tried hiding and only showing when active? eg:

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

and with active setting:

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


source


Thank you, Sousa. Actively worked by applying an active pseudo-element to the modal structure of the checkbox. Works well with modal strings. The next one removes the page block but leaves the modals running.

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>

The 'display' weight is applied to body elements, not the isolated modal class - the modal class is z-index style sensitive

item: active display ok - z-index trick needs this table (fyi isolated z-index by adjusting modal bottom-left-right-top and height-width - positioning in box shows (unexpected) proportional offset resizing modal, so with DISPLAY at focus nix position and focus z-index

my app is for pop-up information cards - no modal: active trick, inactive (invisible) modal pushes to the top of the page, blocking users from accessing links to pages - as far as this topic is concerned, this would mean there is no access to linked buttons on the page either will be available using our layout

the same using FontAwesome icons as the background of the page - which resolves in a similar style, unless you want to block content theft (thanks fa)

refer to this:

https://designshack.net/preview/37934 ( https://designshack.net//tutorialexamples/cssmodal/index.html )

on the example of scenarios with a lot of scenarios: http://subtlepatterns.com/retina-wood/

0


source






More articles:


All Articles