11

I have used modal popup of Bootstrap in my project and want following things:

  1. When open modal popup and click on the background popup should not close.
  2. When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
  3. After open modal popup user can also work on the background that time popup should not close.
informatik01
  • 16,038
  • 10
  • 74
  • 104
user3248761
  • 361
  • 2
  • 5
  • 14

4 Answers4

22

1) When open model popup and click on the background popup should 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 open model popup background should not blur. meaning opening model popup background should not affect any way.

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

.modal-backdrop {
    display:none;
}

3) After open model popup user can also work on the background that time popup should not close.

Add values in .modal-open .modal

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

SideNote: you may need to adjust the width of modal according to screen size with media queries.

Disclaimer: This answer is only to demonstrate how to achieve all 3 goals If you have more then one bootstrap modal, above changes will effect all modals, highly suggesting to use 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 Fiddle Example

Shehary
  • 9,926
  • 10
  • 42
  • 71
  • thank you so much got solution of all problems. but 1 more problem i couldn't fix height of .modal-open .modal css. height is spreading till last of the page there i cannot click on the background. thanks – user3248761 Feb 14 '16 at 08:01
  • when you open the modal, did you see the page scroll bar or it's hidden? if modal open does the page background scroll able and last did you set the fix height, by default modal inherit it's height from the content inside it? – Shehary Feb 14 '16 at 08:13
  • when open model page background scroll is not able to visible. – user3248761 Feb 14 '16 at 09:59
  • add this in css `.modal-open {overflow: auto !important;}` and see if it fix the issue – Shehary Feb 14 '16 at 10:01
  • 1
    I have Kendo grid at the back, when popup is opened i could not do the inline edit in Grid. What should be done? – Jothi Nov 30 '18 at 18:16
  • that's great :P – Soft Technoes Feb 26 '20 at 07:25
0

backdrop="false" will remove background black screen only but it will not allow you to do anything on background element. To keep background interactive and keeping modal in middle position with full view you need to remove 'modal' class using js code after modal generate. and need to use some custom css style. Add a custom class with modal

    <div class="modal fade custom-modal" id="myModal" role="dialog">
        <div class ="modal-dialog" role="document">
            <div class ="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header moveable-modal-header"></div>
               </div>
            </div> 
       </div>
    </div>
    //cs styles//
    .custom-modal{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
        height: fit-content;
        padding: 0 !important;
    }
    .modal-dialog{margin: 0;}

now after populate modal need to remove 'modal' class from myModal div function openModal(){ $("#myModal").modal({backdrop:false,show:true}); $("#myModal").removeClass("modal"); //this will make modal moveable// $("#myModal .modal-dialog").draggable({ handle: ".moveable-modal-header" }); }

Palash
  • 139
  • 2
  • 7
0

If you want to work on input/textarea elements when the modal is open you can use this.

$('#myModal').on('shown.bs.modal', function() {
  $(document).off('focusin.modal');
});
kingkong
  • 1
  • 1
0

We had been struggling with modals opening in background since 6 months and the following settings has resolved it for all our clients:Please change the cache behavior in IE from “automatic” to “Every time the page changes”.

user11078255
  • 21
  • 1