I have a page which has an iFrame to another page and what I am looking for is to click a button with this code inside the iframe:
<td class="id-center">
<div class="bs-example">
<a id="comments" href="comments.php?id=$id" name="comments" value="$id" data-toggle="modal" data-target=".bs-example-modal-lg\" class="btn btn-primary btn-default center-1"><span class="glyphicon glyphicon-comment"></span></a>
</div>
</td>
which can then open the following overlay pop up box in the parent window:
<!-- Large modal -->
<div style="width:90%;" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<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" id="myLargeModalLabel">Add a comment</h4>
</div>
<!-- Body of popup -->
<div class="modal-body">
Test
</div>
</div>
</div>
</div>
I'm doing this with Bootstrap 3. Any help would be appreciated!
One way you could go about this is to open the modal through bootstrap's javascript api. The key to making this work is to use the iframe's parent attribute to access the parent document. You can check out this JSFiddle to see what I mean. Unfortunately it's set up kind of strangely because the iframe can't access JSFiddles javascript window (or I just don't know how), but the content you would see in the iframe is embedded in its property srcdoc. Let me know if any of this needs any explaining.
window.document.body.insertAdjacentHTML('afterbegin', "<div id='overlay' style='height: 100em;background-color:#000; opacity:0.4; width: 100%;z-index: 1000;position: fixed;'><div style='height: 100%;width: 70px;margin: auto;'><img src='/spinner.gif' style='height: 70px;margin-top: 40vh;'/></div></div>")
This will add overlay to your parent body but this will work only if both the pages in the same domain.
Related
I have a web page that makes use of a number of different modals to display information to the user.
These modals are triggered by certain buttons, which usually call $("#id").modal("toggle") to toggle the modal's visibility on. In one particular scenario, I have one modal which displays a second modal through the use of the above stated function. It also hides itself through the use of the same function, so I have an onClick function that does the following.
$("#EditTask").modal("hide");
$("#AddressProspect").modal("show");
The issue is that when the AddressProspect modal is displayed, it seems as though it is not being changed to the active element. The background goes dark, and the modal is displayed correctly. However when I attempt to scroll, the background elements scroll instead, as if the modal hasn't actually been displayed.
I have attempted a number of different approaches. I have used .modal("show") and .modal("hide") to display the modals I need. I have also trieddata-dismiss="modal" within the button of the modal that needs to be hidden. These have all produced the exact same result.
Interestingly, if I go to my console and execute the following commands
$("body").css("overflow-y", "hidden");
$("#AddressProspect").css("overflow-y", "scroll");
The background becomes unscrollable, and the AddressProspect modal becomes scrollable, just as I would expect.
I have around 10 modals being used within my page, and none of them have this problem apart from the one in question. I have posted the code to the two modals mentioned in this post below, with their bodies removed for clarity.
<div class="modal fade bd-example-modal-lg" id="EditTask" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="Title">Title</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
-snip-
</div>
<div class="modal-footer">
<div style="width: 100%">
<button type="button" class="btn btn-warning action-skip-instruction" style="float: left;" data-dismiss="modal">Skip Instruction</button>
</div>
<button type="button" class="btn btn-secondary action-close-edit-modal">Close</button>
<button type="button" id="edit-task-button-defer" class="btn btn-warning edit-task-action" style="display: none;">Defer</button>
<button type="button" id="edit-task-button-action" class="btn btn-success edit-task-action" data-dismiss="modal">Complete</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="AddressProspect" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" style="max-width: 600px;" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Security Address Prospect</h5>
</div>
<div class="modal-body">
-snip-
</div>
<div class="modal-footer">
<div style="width: 100%">
<button type="button" class="btn btn-warning prospect-button-clear" style="float: left;">Clear</button>
</div>
<button type="button" style="float: left;" class="btn btn-danger prospect-button-close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success prospect-button-update">Update</button>
</div>
</div>
</div>
</div>
After a decent amount of time having issues with this problem I have managed to figure out why it is happening and how to fix it.
There are two places I looked for information on this topic:
This Github issue on the Bootstrap repo
The Bootstrap documentation on modal methods
From reading the Github issue we can see that one user notes that the calls to .modal("hide") and .modal("show") are asynchronous, therefore using them in quick succession is invalid. Instead we must wait for the show/hide to complete by listening for the shown or hidden events.
To do this we can use the following function:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
By checking for the hidden.bs.modal class to be placed into the modal's classlist we can verify when the hide animation has completely finished. At this point we can then call the show method of the next modal to be displayed, ensuring that all of the background events handled by Bootstrap have finished executing, and ensuring that behaviour is expected.
My previous code goes from being:
$("#EditTask").modal("hide");
$("#AddressProspect").modal("show");
to:
$("#EditTask").modal('toggle');
$("#EditTask").on("hidden.bs.modal", function() {
$("#AddressProspect").modal('toggle');
});
As soon as I tried the new code, the weird issues with scrolling disappeared.
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 having an issue with a Bootstrap modal where if I change the size to small, there is a lingering backdrop modal behind it that is still large.
In the Elements window I can remove the class="modal-content" right before uib-modal-transclude and the modal behind disappears. However I am trying to apply this change in my code and can't get it to work.
First off, this code seems to be coming from uib/template/modal/window.html or https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
I am using ui_bootstrap/1.1.2
I tried to overwrite the template using windowtemplateurl and making the new template have:
<div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in"
uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}"
uib-modal-window="modal-window" size="sm" index="0" animate="animate" modal-animation="true"
style="z-index: 1050; display: block;">
<div uib-modal-transclude=""><!--
<!-- Modal -->
<div class="modal-dialog modal-sm">
<div class="modal-content modal-sm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="Cancel()"><span
aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title ng-binding" id="notfound"> Not Found</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="Cancel()">Close
</button>
<button type="button" class="btn btn-primary">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
This didn't work. It doesn't seem like changing windowTemplateUrl changed anything at all... I also tried adding css to modal-content, however this screws up other modals on this page.
Am I on the right track? Where is this error coming from? What is the best way to fix it?
In case anyone else has this error, here is what I did to fix it.
I did find a declaration for the size of the modal to be "xl" in my code. Changed that to "sm" and there was still a wrapper around my modal that was 300x184 whereas my modal was 300x122.
I took out the class="modal-dialog" div wrapper and the second modal disappeared.
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