CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
dpndra
dpndra

Reputation: 2168

how can we remove the background color of the modal in bootstrap during fade in?

enter image description here

When we click the button during the fade in the background color changes to light black as in picture? I just want the modal without any background effect (just the white portion without the black portion ) so how can we disable the background effect in the modal of bootstrap?

Upvotes: 0

Views: 6808

Answers (3)

pranav shinde
pranav shinde

Reputation: 1650

This is css trick,we need to override the bootstrap css place the following code above your modal div,change id of the modal as per your id.

#myModal .modal-content{
background-color: rgba(0,0,0,0);
border: none;
}

Upvotes: 0

GillesC
GillesC

Reputation: 10874

From the bootstrap documentation found here http://getbootstrap.com/javascript/

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop=""

backdrop {boolean or the string 'static'} default:true

Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

So just setting the option to false should do the trick as in

$('#myModal').modal({
  backdrop: false
});

Upvotes: 1

Oomph Fortuity
Oomph Fortuity

Reputation: 6118

You have to decrease the opacity of backdrop. Just override to below CSS class

.modal-backdrop, .modal-backdrop.fade.in{
opacity: 0.1;
}

Upvotes: 1

Related Questions