I have been using BT3 with a modal window (remote data).
Why BT3 doesn't render select input element from remote content (show.php).
Select element looks normal. I need to have it like from BT3 style.
The same issue are with checkbox elements.
<a data-toggle="modal" href="show.php" data-target="#myModal">Click me !</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-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
show.php:
<select>
<option value="1">TEST</option>
<select>
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 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');
});
});
I am trying to insert video in the page which i am working on. But my page is not displaying poster image. Only the video is working when played. Why?
<body class="page page-index">
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" style="overflow:hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header" style="padding:0px 0px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body" style="max-height:none" >
<video controls height="480" width="480" poster="img/poster480.png">
<source src="video/sample.mp4" type="video/mp4">
</video>
</div>
</div>
<script src="js/bootstrap-modal.js"></script>
<script src="js/script.js"></script>
</body>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">
Launch demo modal</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-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<video controls height="400" width="400" poster="images/amit.jpg">
<source src="images/big_buck_bunny.mp4" type="video/mp4">
</video>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Tested in Google Chrome and Firefox was working as expected.
Please note : I used bootstrap.min.js of version v2.3.1, Please check if u are using an older version.
Cheers!!
Below i have listed my links for the head and my links at the bottom of the page. The modal is not loading and i am not sure why, i believe this is an issue with my linking of the files.
Head links:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/carousel.css" rel="stylesheet">
Footer:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<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-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>
Links below footer:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.js"></script>
Here's a working jsFiddle with almost your exact HTML, the only differences are that I'm linking to CDN versions of jQuery, Bootstrap 3 CSS and Bootstrap 3 JS
As others have suggested, double check all the CSS and JS files are actually loading and there isn't a path issue
Check all your Bootstrap CSS and JS files are consistent and for Bootstrap 3
Comment out the carousel.css file, to verify there isn't a conflict there
HTML
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<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-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>