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.
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 am trying to create a form inside a modal dialog, it's working if I don't identify a modal size, but if I go to this page: http://getbootstrap.com/javascript/#modals and copy large size modal dialog code, and put my form inside it, the design will be wrong, and the form will be stuck at the top and right borders.
Here's a JS fiddle of the form itself: https://goo.gl/wsnwm8
Thanks.
FORMAT for bootstrap modal
<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">Modal title</h4>
</div>
<div class="modal-body">Modal Body</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
`
Enclose your form inside modal-body
like below
<div class='modal-body'><form ><form></div>
Demo
Put a container class in your modal-content and everything will look just right.
<div class="modal-dialog modal-lg">
<div class="modal-content container">
<!-- form content goes here -->
</div>
</div>
JsFiddle
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.
I am using Twitter Bootstrap's (v3.1) modal dialog and when I show a dialog and dismiss it, any buttons that were not on the screen when the modal displayed are no longer clickable in IE 11.
As shown in the above illustration, the I have multiple buttons to show modals and they are further down the page than where the modal displays (at the top of the page). The first modal displays properly. However, once I dismiss that modal and scroll back down the page to click on another button, the buttons are no longer clickable.
My button code:
<button type="button" id="btnPreviewSales" name="btnPreviewSales" class="btn btn-default" data-toggle="modal" data-target="#previewSalesModal"><span id="btnSalesPrevImg" class="glyphicon glyphicon-eye-open"></span> Preview Sales</button>
My modal code:
<div class="modal fade" id="previewSalesModal" tabindex="-1" role="dialog" aria-labelledby="previewSalesModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="previewSalesModalLabel">Preview Sales</h4>
</div>
<div class="modal-body">
<img src="preview.jpg" alt="Sales Preview" class="img-responsive" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It works fine in other browsers (Chrome, Firefox) and I have the X-UA compatible tags properly set. What can I do to get the buttons clickable again after dismissing the modal in IE?
Ok, I found a solution. I also noticed that the modal was jumping to the top of the page each time and went looking for a solution to that problem. I found Bootstrap modal: background jumps to top on toggle and the recommended the solution was to override a bootstrap style:
body.modal-open {
overflow: visible;
}
My original issue:
I know that when this gets coded, the variables get written when the request is sent from the server. So I'll probably have to use JQuery, but I'm lost on where to even start (I don't know JS).
This code works when I refresh the page, but I want it to refresh the data being displayed when the modal is clicked on.
Can anyone point me in the right direction?
My self found fix, for others to view:
Modal Code:
<div class="modal fade ajaxmodal" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" 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" id="myModalLabel">Trace Logging</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
JS:
$('.ajaxmodal').on('show.bs.modal', function () {
$('#modal-body').load('trace.php');
});
trace.php has formatted html that displays on click perfectly.
Updated my original question to contain my answer as well.