All geek questions in one place

Turn on background when popup download window opens

I used the modal bootstrap popup in my project and want the following things:

  • When an open modal popup and clicking on the background the popup does not close.
  • When an open modal pop-up background should not blur. the meaning of opening a modal pop-up background should in no way influence.
  • After an open modal pop-up user can also work in the background, the pop-up should not close.
+5
source share
1 answer

1) When the popup window of the open model and clicking on the background, the popup window does not close.

Include data attributes data-keyboard="false" data-backdrop="static" in the modal definition itself:

 <div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static"> // Modal HTML Markup </div>

2) When the pop-up background of the open model should not be blurred. the meaning of the tooltip should not affect anything.

Set the value of the .modal-backdrop property to display:none;

 .modal-backdrop { display:none; }

3) After the pop-up window of the open model can also work on the background, the time of the pop-up window should not be closed.

Add values ​​to .modal-open .modal

 .modal-open .modal { width: 300px; margin: 0 auto; }

SideNote: You may need to adjust the width of the modal size to fit your screen using media queries.

Disclaimer: This answer is intended only to demonstrate how to achieve all three goals. If you have more than one boot mod, the above changes will affect all modalities, suggesting the use of custom selectors.

 .modal-backdrop { display: none !important; } .modal-open .modal { width: 300px; margin: 0 auto; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button> <br> This is a text and can be selected for copying <br> This is a text and can be selected for copying <br> This is a text and can be selected for copying <br> This is a text and can be selected for copying <br> <div id="myModal" class="modal fade" role="dialog" data-backdrop="static"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Working script example

+9
source

Source: https://habr.com/ru/post/1242969/

More articles:


All Articles