I have this modal:
http://jsfiddle.net/DTcHh/482/
I have some buttons on the right, and text on the left. I want these to be aligned vertically. The text should be on the same line if you place a ruler under it. I can't seem to be able to do this.
Any ideas?
<div class="modal-footer" style="margin-top:0;">
<div style="float:left;color:#737373;font-style:italic"><strong>test:</strong> - advanced</div>
<div style="float:right">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-loading-text="Submitting...">Send Message</button>
</div>
</div>
You could simply add the text in a span with 2 native bootstrap classes applied: form-control-static for vertically aligning the text with the buttons and pull-left for left aligning the text in the footer.
There's no need for the extra floating divs, the buttons will already be right aligned by the modal-footer class. You can even adjust text- and buttonsizes for example by applying input-lg and btn-lg classes to the span and buttons respectively:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<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 title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<span class="form-control-static pull-left">Example vertically aligned text</span>
<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>
Just give the div in question the same line-height as your button height is.
In your case it would be line-height: 34px;.
Updated Fiddle
Related
I have a two column Bootstrap layout on small screens and up. For the extra small size class, I'd like to hide the second column from the normal flow, and instead use it as the contents for a modal.
Is that possible in an elegant way (i.e. without moving it around the DOM with Javascript)?
Example:
<div class="row">
<!-- Main Column -->
<div class="col-sm-8 col-md-9">
Main contents blah blah blah
</div>
<!-- Secondary Column -->
<div class="col-sm-4 col-md-3">
Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
</div>
</div>
Sample modal (in which the secondary column should be displayed):
<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 title</h4>
</div>
<div class="modal-body">
This is where I want the contents from the secondary column
</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>
Yes, you can do that by using jQuery's $.html() function to get the html of the column and then using $.html() again to place it in the modal. This, combined with Abdulla's recommendation, should give you what you want. Here is a demo I created:
$("#myModalBtn").click(function() {
$("#myModal .modal-body").html($("#myModalContent").html());
$("#myModal").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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"/>
<div class="container">
<div class="row">
<!-- Main Column -->
<div class="col-sm-8 col-md-9">
Main contents blah blah blah
<button type="button" class="btn btn-primary visible-xs" id="myModalBtn">Launch demo modal</button>
</div>
<!-- Secondary Column -->
<div class="col-sm-4 col-md-3 hidden-xs" id="myModalContent">
Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
</div>
</div>
</div>
<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 title</h4>
</div>
<div class="modal-body">
This is where I want the contents from the secondary column
</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>
Click on Run Code Snippet then click on the "Full Page" link to see it in action.
Use hidden- property in Bootstrap.
Hidden-xs - Hidden in Extra Small
Hidden-sm - Hidden in Small
Hidden-md - Hidden in Extra Small
etc ..
Check this Responsive utilities
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>
I am new to this area and was trying to create a modal. I found this modal: http://drublic.github.io/css-modal/#howto
but could not understand what files to include in my webpage. I see there are a lot of different files (SCSS, CSS, and JS) and many others.
What are the files I should include before writing the markup and getting started on this assignment?
You can use Bootstrap modals. They are flexible and required minimum functionality..
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Required CSS and JS files are available in JsFiddle's External Resources link
You can find more help and information from Here and below is a working example as well.
Fiddle Example
I have two modals created with bootstrap - one for sign in and one for sign up. In each modal I have a link which I want it to refer to the other modal. E.g the sign up modal is open, registered users can click a link inside the sign up modal in order to sign in, and vice versa.
How can I close the sign up div when clicking the sign in link and open the sign in div instead?
complete code in here:
https://jsfiddle.net/f9r3ttpw/
This is the example starting code for the sign up modal:
<div class="modal modal-backdrop fade" id="myModalJoin" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contentJoin">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">
<span class="glyphicon glyphicon-remove-sign"></span></button>
<h2 class="modal-title join" id="myModalLabel"></h2>
</div>
<div class="modal-body">
Hi Here is working code
Java script
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#myModal").modal('show');
});
$("#btn2").click(function(){
$("#myModal2").modal('show');
});
$("#login").click(function(){
$("#myModal").modal('hide');
$("#myModal2").modal('show');
});
$("#singup").click(function(){
$("#myModal2").modal('hide');
$("#myModal").modal('show');
});
});
</script>
HTML
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
sign up login
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Sign up code here?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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>
<button type="button" id="login" class="btn btn-primary">login</button>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Login code here?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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>
<button type="button" id="singup" class="btn btn-primary">sign up</button>
</div>
</div>
</div>
</div>
</div>
Twitter Bootstrap has option to open and hide modal window. You just need to call methods properly For example
$(document).ready(function(){
$(".modal1.show").click(function(){
$("#myModal2").modal('hide');
});
$(".modal2.show").click(function(){
$("#myModal1").modal('hide');
});
});
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>