I am using bootstrap modal to create a thumbnail gallery that displays an attemp of full-size images when its thumbnail is clicked.
I managed to make everything work fine and changed the css a bit but I don't find the way to change the modal div width to be adapted to the image within in. Basically I want to do this so the image is displayed full-sized.
Here's my HTML:
<div id="galeria" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-body"></div>
</div>
</div>
</div>
</div>
What should I do to achieve my goal? I am using Bootstrap 3.
try boostrap image gallery modul
http://blueimp.github.io/Bootstrap-Image-Gallery/
you can make responsive moduls with this
Related
I'm using Bootstrap Modal to load lightboxes with some resource-heavy content.
But the content is loaded immediately with the page. And since there's several lightboxes it slows the page down significantly.
I want the content to load only when the modal button is clicked. But I don't want to call the modal code from a separate page, since that would complicate everything.
Is there some way to use JS or AJAX to load the modal content only when the modal box opens?
Somehow trigger it to load when the button is clicked and then turn the content off, when the box is closed.
Also bear in mind that I don't know almost anything about JS or AJAX.
--EDIT: It would be great if the same solution could be applied to tabbed content--
The code I'm using:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe width='100%' height='368' src='#' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I'm working on a form that loads content from a checkbox menu.
If a user checks a box, a bootstrap v3.3.4 modal pops and the chosen content shows up in the modal.
Here is the code when the modal is closed:
<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">
<h4 class="modal-title" id="myModalLabel">My Modal Title</h4>
</div>
<div class="modal-body">
<div class="box">MY CONTENT IS HERE</div>
</div>
<div class="modal-footer">Footer text is here</div>
</div>
</div>
</div>
When the modal is opened, a style is being added to <div class="box">
like this: <div class="box" style="display: block;">
I'd really like to add more styles to that div, but only when the modal is open. From where does the style get added? I've checked my jquery.js and bootstrap.js files and can't figure it out. Also tried various if statements to no avail. i.e. $('#myModal').is(':visible');
Thanks so much for any advice.
The easiest way is to check if a modal is opened or not is to check if the modalElement has the class 'in' appended to it when the modal is opened.
$('#myModal').hasClass('in')
Working example : http://jsfiddle.net/3kgbG/1151/
I am trying to disable the fade of a modal in bootstrap, but it will not work what ever I do, I have tried the below code but sitll not luck, I have looked all over google but no information on this I have noticed, except the 2 css things I have tried in the below code.
.dont-fade {
trasition: none;
opacity: 1;
}
I just want to disable the fade of a modal, and just have it like a div ontop of the whole page, without the fade.
Heres my html of my modal
<!-- Information on user popup -->
<div id="banModal" class="modal" role="dialog" style="">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Welcome!</h4>
</div>
<div class="modal-body">
<p>Hello, here is some test</p>
</div>
</div>
</div>
</div></div>
I am working on a project that use bootstrap, in it I need to show modal windows that contain other html page I use the following code
<a class="menuItemManageContent"
href="<%= request.getContextPath()%>/news/index/NEWS/0943ac5b-e556-49eb-acef-a112a56e3e7b/managePortlet.html"
data-toggle="modal" data-target="#modal-table_<%= request.getParameter("instanceId").toString() %>">Manage content</a>
<div id="modal-table_<%= request.getParameter("instanceId").toString() %>" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="white">×</span>
</button>
mange
</div>
</div>
<div id="contentBody" class="modal-body no-padding">
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
the code above work fine , it is showing the modal with my page in it the only part I need to put my content in contentBody so I still have the header for the modal as I design it, my question here is there is an easy way to do that with no javascript, can I tell the data-target to put the page in the contentBody div instead of the default modal content which is override my div.
fine, i got it work I just move the header out of the content and that solve the issue, I will leave this question hopefully it help someone else
I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.
But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.
I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:
<script>
jQuery(document).ready(function() {
jQuery('#subscribe').modal('hide')
});
</script>
So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.
Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:
http://jackalopemedia.com/jasontreu
Appreciate any help!
Ok I found the solution
You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.
So your line should be
<div id="subscribe" class="modal hide fade" role="dialog">
For more details visit bootstrap
Compare Your Modal With This, If Your Code Match With This, It Should Be Working.
<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>