dollar dollar - 1 year ago 396
HTML Question

bootstrap 3 disable background after modal popup

I am trying to popup bootstrap 3 modal in my code using below given code

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" aria-hidden="true" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<div class="modal-body">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>

I want to disable background completely and only modal should be active at the time, like this

I want like this given below
enter image description here

and this is what I am getting
enter image description here

Answer Source

For Disable the background

On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal.
As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc.

If you opening the modal by js use:

$('#myModal').modal({backdrop: 'static', keyboard: false})

If you are using data attributes, use:

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal

For Changing the background Color

To change the backdrop color you can use this:

.modal-backdrop {
  background-color: #0000ff;

or separate into classes:

.modal-blue .modal-backdrop {
  background-color: #0000ff;

.modal-white .modal-backdrop {
  background-color: #ffffff;

and then add the class to your div:

<div class="modal fade modal-white" ... >
  <div class="modal-dialog">

to stop sliding down remove the "fade" class.

Hope this will helps you..


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download