Implemented a modal of twitter boots trap....
It works fine when I don't put it in my site.....
After I included it in my site the modal shows up but does not slide from the top....
Actual modal
http://jsfiddle.net/nJ6Mw/1/
modal not sliding from top
http://jsfiddle.net/y88WX/12/embedded/result/
<div id="example" class="modal hide fade in" style="display: block;" aria-hidden="false">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer"> Call to action
Close
</div>
</div>
It might be because you have it within your #container div instead of outside of it in the body??
Hard to tell cause you're second fiddle doesnt compile right
Related
I have some issues with Bootstrap modal. When I click to open a modal, it's seems good, but when I close modal it's all black. I noticed that when I click x (close), at the end of code I have 5 of this classes <div class="modal-backdrop fade in"></div>.
Here is the code of modal:
<div class="modal fade product-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
<h3 class="modal-title product-title">
{{$prod_name}}
</h3>
</div>
<div class="modal-body">
<div class="product-description">
{{$product->description}}
</div>
</div>
</div>
</div>
</div>
It's in PHP foreach.
Full code: pastebin.com/uZHYqqBu (first modal starts from line 221 and second from line 286).
If you are using the whole modal code inside the foreach then you will have multiple instances of modal element so the functionalities in bootstrap will not work properly since these functionalities are designed for targeting single instance of element.
So, to solve this you have to keep the modal code out of the foreach block and have to populate the data in the modal dynamically on a click event.
I have a login/signup modal it is working fine,but i need to open the modal when the page loads
I have taken the code from here
I have changed my code like this and i need to open the reset password modal when the page loads.
Modal Code
<div id="cd-reset">
<div class="row">
<div class="col-md-8 col-md-offset-2 Mask2" align="center">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load',function(){
$('#cd-reset').modal('show');
});
</script>
but its not working. when I load the page it does not display the modal/popup
can anyone suggest me how to do.
Thanks in advance.
Ideally the bootstrap modals need certain classes to give you the feel. You need to use the exact classes to get the modal pop-up. Also, in your code there is no content (text) and thus why you're not seeing anything.
Code should look like below.
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<p>Some text in the modal.</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
we created a website where we want to show some examples of our cards as thumbnails, but when you click on it a larger picture should be displayed in a modal window. Now locally (windows machine) it works perfect, but once hosted (linux machine) the whole content (title, markup, picture, buttons) of the modal are displayed as a set of strange symbols.
The code of the modal:
<div class="col-md-4">
<a href="images/JUNO-FOTO-MW.png" class="thumbnail" data-toggle="modal" data-target="#ModalJUNO">
<img src="images/JUNO-FOTO.gif" alt="geboortekaartje Juno" style="width:200px;height:200px">
<p>geboortekaartje </br>Juno</p>
</a>
</div>
<!-- Modal -->
<div id="ModalJUNO" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Geboortekaartje Juno</h4>
</div>
<div class="modal-body">
<img src="images/JUNO-FOTO-MW.gif" title="geboortekaartje Juno" alt="geboortekaartje Juno wil nu eventjes niet laden" width="850" height="850">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The result of the hosted site
A part of the result:
Since it is not only the picture but the whole modal that is displayed like this, it does not seems like it is an encoding problem.
Any help is greatlty appreciated!
Remove href from your <a> tags.
I debugged bootstrap.js and found, that jQuery.load function is used to load modal's content.
Take a look at
http://getbootstrap.com/javascript/#modals-options
Read about remote option.
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