I am trying to work the bugs out of my modal. I am using Bootstrap, Angular and ng-Route. I recently noticed on mobile (and then on desktop) when I push the back button with the modal open it leaves a gray overlay and you cannot click anything. So the solution I found that partially fixes the problem is to add this script:
$(".modal").on("shown.bs.modal", function() { // any time a modal is shown
var urlReplace = "#/" + $(this).attr('id'); // make the hash the id of the modal shown
history.pushState(null, null, urlReplace); // push state that hash into the url
});
// If a pushstate has previously happened and the back button is clicked, hide any modals.
$(window).on('popstate', function() {
$(".modal").modal('hide');
});
This works great then the user presses the back button however when the user closes the modal by clicking outside of the modal or hitting escape the urlReplace remains in the browser address bar. I want to get it to change back to the previous when ever the modal is closed.
If that issue cannot be resolved I at least would like this other issue to be fixed which is this: When the user closes the modal by clicking outside or hitting escape the urlReplace remains in the browser address which is fine but when the user then goes to click a link in my nav bar it doesn't take them to the link it goes to a blank page with the urlReplace still in the address bar and then I can click a link in the nav bar again and it will go to the proper link which I find strange not sure how to resolve this issue.
Any ideas or insights into this would be awesome!
You can add a handler to watch for the modal close event, then push a new history with the hash removed:
$(".modal").on("hidden.bs.modal", function() { // any time a modal is hidden
var urlReplace = window.location.toString().split('#', 1)[0]
history.pushState(null, null, urlReplace); // push url without the hash as new history item
});
Related
I am working in a project where I show some modals under certain conditions, after some work I realized that if I try to refresh the page while a modal is showing up, the modal vanishes.
I would like to know if there is a method that would let me render the modal when refreshing the page.
I tried this java script code:
// Get the modal
var modalBtn = document.getElementById("modalBtn");
// // Get the button that opens the modal
// var buttonModal = document.getElementById("buttonModal");
window.onbeforeunload = function (evt) {
buttonModal.click();
console.log("refresh")
}
// //hold modal
buttonModal.addEventListener('click', () => {
// //show error modal
$("#modal_error").modal()
})
In the case I click on buttonModal, I can see the modal, but when I refresh it vanishes.
If I refresh the page I can see the modal for an short period of time, but it does not hold itself.
would there be a way that let me hold the modal, if its being display, inclusive after refreshing?
Luis
I want to close my color box popup on browser's back button click.
I used an iframe and inside the iframe there are many links. When user click on particular link then a color box popup will open.
Currently after opened the popup if user click on back button then popup is not closing.
So i want such a functionality that if user click on back button then popup will be close and also page should not go to back (Disable back button).
I have used the following code but it's not working for me.
<script>
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
</script>
Please give me any suggestion to close the color box popup on back button or disable the back button completely.
You should use window.location.hash, and window.onhashchange.
Basically, after popup open, you change hash to something (like window.location.hash = "popup_opend").
Then when user clicks back, that back click will remove the hash you just added.
You just need to handle window.onhashchange to check for that and close the popup.
Of course, hope you don't have any other code that manipulate the hash.
How do I stop an already open and instantiated bootstrap modal from closing on
Esc keypress
clicking on modal backdrop
I know about the backdrop = static option. But its before initializing the modal. Here I have the modal all nice and initialized. And its working all fine and dandy. Now in a user flow, I am supposed to prevent the modal from being "close-able".
Update 1: Just to clarify, I don't want that modal window to be unclosable (if thats even a word) from the beginning. I just want to modify the behaviors based on user activity and only for a specific flow. If the user doesn't follow that activity flow, I want the modal to retain the original behavior of being able to close on backdrop click.
So I found the following solution.
Bootstrap v3.xx
jQuery('#paymentous').data('bs.modal').options.keyboard = false;
jQuery('#paymentous').data('bs.modal').options.backdrop = 'static';
Bootstrap v2.xx
$('#paymentous').data('modal').options.keyboard = false;
$('#paymentous').data('modal').options.backdrop = 'static';
This will prevent an already instantiated model with backdrop option set to false (the default behavior), from closing.
I have the standard tabs setup using Bootstrap 3. Each tab is a form into which the user inputs information. Now there is a save button at the bottom of each form which will save the information in the current tab, but what I'm looking to do is enable the user to click a different tab at the top of the page, and be given a warning of
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
with an OK or Cancel button. If they click OK then they go to the tab they clicked, and if they hit cancel, they stay on the current tab. Anybody any idea how I can do this? I've been trying to get this all day, but with no luck. Should I even be using Bootstrap tabs or would it be easier to build my own tabs functionality instead of over-riding bootstrap's tabs?
Per the Bootstrap 3 docs, you can set up something like this. In your tab button listener, show a confirm box, then add logic to handle that response:
$('#myTabs a').click(function (e) {
e.preventDefault()
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
if (areYouSure === true) {
$(this).tab('show')
} else {
// do other stuff
return false;
}
})
You could add a class to your tabs and then use an on click function where you'd fire a modal or bootbox confirm asking the user if they want to continue to the new tab. If they select no, you prevent the new tab from loading, if they select yes, you continue.
https://api.jquery.com/click/
http://bootboxjs.com/examples.html
I have a gridview displayed in a page which also has a link. When I click on the link, a showModalDialog() will open up where I can edit the value.
After that when pressing Update button the value is getting updated in the database and my child form closes perfectly.
But I need to update my parent page table as well. So that the new value gets reflected in the parent form. I tried the following in the child window.
<body onunload="window.opener.document.forms[0].submit();">
But that is not working. Suggest me a good solution.
You do not have onUnload in a modal dialog
var res = showModalDialog(...); // execution is blocked until modal is closed
if (res) location.reload(1); // res contains what dialog set returnValue to
and in modal dialog you do
window.returnValue=true; // if ok submission
window.close(); // will return control to opening window
Anyway, did you look to the right? there are many duplicate questions about gridviews and modal dialogues
I guess you have a function on Update button click, which updates the database and close the form, can you place that code (the one that you have in unload) in that function before closing the window