Demo
I need to change only the background of one of the Modals with specific ID #firstModal which I am using in Bootstrap 3 by using this CSS rule
#firstModal.modal-backdrop {
background-color: green;
opacity: 1 !important;
filter: Alpha(opacity=50);
}
and here is the modal
<div id="firstModal" class="modal fade" 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" aria-hidden="true">×</button>
<h3 id="myModalLabel">First Modal</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Why is this not working?
TRY - DEMO
CSS:
/* CSS used here will be applied after bootstrap.css */
#firstModal {
background-color: green;
opacity: 1 !important;
filter: Alpha(opacity=50);
}
Related
I needed to increase the Bootstrap modal width so I used the code from this post: How to resize Twitter Bootstrap modal dynamically based on the content
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
But now my modal is not vertically centered.
Edit: I already have modal-dialog-centered but it broke it
I tried to wrap the modal-content with a div with d-flex align-items-center but that didn't work either:
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="d-flex align-items-center">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
But that didn't work either
I use a lot of modals on my current project. I'm using the Animated.css library for animations. - The problem is that I want to use a animation when the modal close. E.g: open modal = flipInX / closing modal = flipOutX
I've seen a lot of these questions, but I can't get it to work for me. I want the effect to work on all of my modals, not just one specific.
<div class="modal animated flipInX fade modal-fullscreen" id="info" tabindex="-1" role="dialog" aria-labelledby="d01" aria-hidden="true">
<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">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
</div>
</div>
</div>
</div>
</div>
.modal {
transiton: opacity 2s;
}
.modal-close {
opacity: 0;
}
you can add the class to do the animation when the user close modal.
getElementById('btn-close-modal').classList.add('modal-close')
thus, the modal will assume 0 of aptitude with the animation defined in the modal-close class
Besides using jQuery, is there a way to change the color of the .add-button below so that it toggles when click and will change back when the modal is closed?
<div className="container">
<button type="button" className="btn btn-md add-button" data-toggle="modal" data-target="#myModal">
<span className="plus-sign">+</span> Contacts Keeper
</button>
<div className="modal fade" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
...
</div>
Rather than changing the button color on click you should change it on hover. Since only in that case you will be able to see visible effect otherwise when clicked modal will be closed.
One way to use psuedo classes in css and another way to use js to change the css styles.
Also I noticed that you are using classNames, It means may be using react.
In that case append a predefined css class to your existing button css classes on mouse over and remove them on mouse out.
function changeColor(x) {
x.style.background = "red";
}
function normalColor(x) {
x.style.background = "white";
}
#test-button:hover{
color:red;
background:green;
}
#test-button:active{
background:yellow;
}
#close-button:hover{
background:cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" id="test-button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal1
</button>
<!-- Button trigger modal -->
<button type="button" id="test-button1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Launch demo modal2
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title1</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" id="close-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title2</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" id="close-button1" class="btn btn-default" data-dismiss="modal" onmouseover="changeColor(this)" onmouseout="normalColor(this)">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
jQuery Layout's z-index is 2.
Bootstrap's modal does not have a z-index set.
http://plnkr.co/edit/yy88iK8t3f2v3pEe5812?p=preview
z-index is applied in a style attribute.
<div class="ui-layout-resizer ui-layout-resizer-north ui-layout-resizer-open ui-layout-resizer-north-open"
style="position: absolute;
padding: 0px;
margin: 0px;
font-size: 1px;
text-align: left;
overflow: hidden;
z-index: 2;
top: 90px;
cursor: default;
width: 1920px;
height: 13px;
left: 0px;"
id=""
>
<div title="Close"
class="ui-layout-toggler ui-layout-toggler-north ui-layout-toggler-open ui-layout-toggler-north-open"
style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; z-index: 1; visibility: visible; cursor: pointer; width: 48px; height: 13px; left: 935px; top: 0px;"
id=""
>
</div>
</div>
FF is reporting the modal's z-index is set to "auto". Changing it to anything else, does not make the modal appear above the layout's resizer.
Any ideas?
You have a nested div within the modal.
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<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>
</div>
</div>
</div>
</div>
</div> <!-- this div should not be within your Modal -->
</body>
should be like this:
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<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>
</div>
</div>
</div>
</div>
</body>
After I had install the flatly template from bootswatch (https://bootswatch.com/flatly/) the normal modal window of twbs is not working anylonger.
<a data-toggle="modal" href="#" data-target="#myModal">CLICK!</a>
.
.
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<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>
</div>
</div>
</div>
</div>
</body>
</html>
It is work perfectly until I add the theme into my application.
This means that the modal window appear, but it is not active.
the modal window appears behind the grey background. the modal window has not the focus. I can't close it too.
But why?
Bootstrap set the z-index for the following items in their variables file:
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal-background: 1040;
#zindex-modal: 1050;
The z-index for items in bootswatch varables file is set as follows:
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal: 1040;
As you can see, the bootswatch modal is set on the same index as bootstrap's modal background. This conflict is causing issues. Setting the z-index for bootswatch's modal to 1050 will fix your issue, or adding an override to the .modal z-index in your site's stylesheet will help as well.
.modal {z-index: 1050;}
I had encountered the same problem.
But then I noticed that I was using Bootstrap v3.3.2 and the version in Flatly css file was v3.3.4
So I updated the bootstrap.js file to the latest version (which is currently 3.3.4) and it worked.
Hope this helps.
Thanks to Steve! The exact override, that helped me (had same issue with Flatly):
.modal-dialog {
z-index: 1050;}
Try like that :
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<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>
</div>
</div>
</div>
</div>