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>
Related
I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" class="modal fade" role="dialog">
<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">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
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'm implementing a Bootstrap HTML application that using Modal as confirm dialog, and it could be a modal inside another one. For example I open modal, then I click something on that modal, the first one will be hidden, and open another modal.
From Bootstrap 3.3.6, they are supporting to add a margin-right automatically, and hide the vertical scroll bar, however once the second modal is opened, the scroll bar is not disappeared, and if I close and open again these modals several times, the margin-right will be increased from 17px to 17x2px, and 17x3px ...
I don't know how to solve that problem with Bootstrap modal, or any workaround, I'm also thinking about Angular that keep only 1 modal, and change the modal content (including header, body, and footer), and each modal will be introduced in a separated HTML template, and angular will load a particular template for each modal, but I'm not have much experience with these workaround with Angular.
Here is the sample page that I created for my problem, the page had long content, with Open Modal button, click to open first modal, then click on Open Second Modal to dismiss the first one and open the second one. If you do that several time, you can see that the margin right is increased, and a white line at the right.
http://plnkr.co/edit/iUuWaSvgDcaKQPTp1Yb2?p=preview
You have written data-dismiss and data-target on one click itself, which is not wrong but internally bootstrap modal has an animate function which takes its own time (appx 500ms). So it would be better if you control it through jqyery.
see below code.
$("#secondModal").click(function(){
$("#firstModal").modal('hide');
setTimeout(function(){
$("#secondModal").modal("show");
},500)
});
The modal method is already integrated within the bootstrap.js which you use.
So it will not show your margin which occurs at runtime.
You can easily handle using stylesheet according bootstrap modal display once into another bootstrap modal.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" id="myBtn">Click here</button>
<div class="modal fade modal-admin" id="myModal" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" id="modelbtn">Click here</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade " id="myModal1" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" id='close' class="btn btn-default" data-dismiss="modal" ng-click=''>Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#close").click(function(){
$('.modal-admin').css('width', '500px');
});
});
$(document).ready(function(){
$("#modelbtn").click(function(){
$('.modal-admin').css('width', '200px');
$("#myModal1").modal();
$('#myModal1').css('margin-left', '200px');
});
});
</script>
</html>
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
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