I have a video inside a modal, which can be opened through many links across the page.
The problem is, when I close the modal with the video running, I can still hear the video... which makes sense, but I don't want it.
Is there a way to implement a hook in Bootstrap's events, like modal? Some event or other thing that allow me to stop the video when the modal is closed.
Handle either hide or hidden event* which modal is triggering before and after close respectively.
$('#myModal').on('hidden', function () {
// stop the video playback
});
*Here are all supported events and methods.
Related
Trying to fire a custom facebook pixel event clicking to an external link (So I can track the analytics of customers going to an external link). I have a function that does work, and I have that attached to a normal link.
Works great on the normal website using onclick="function();" method, but I can't seem to get it working on a popup. I don't have full ability on the popup plugin I am using to modify the HTML around the link, but I can implement Javascript / Jquery on start of the page.
Was hoping there may be an overall method so that all link clicks will fire the event, and it's applied to all links after a delay (giving time for the popup to load.)
You can just listen for clicks on all buttons and a elements:
document.querySelectorAll("a, button").forEach(e => e.addEventListener("click", customEventHandler));
I'm using angular for a mobile web project. I have a basic share button, when clicked a share modal pops up. The share modal's Close button lays on top of (higher z-index) the actual share button. The share modal is generated from external HTML so I cannot use an ng-click directive. As a work around I use the following:
document.querySelector('#shareContent .shareClose').addEventListener('touchend', function( e ){
e.stopPropagation();
$scope.$apply(function(){
$scope.showShareOverlay = false;
})
console.log("closing the share", $scope.showShareOverlay)
})
My issue is that when I touchend the .shareClose button, the modal closes for a brief moment before showing again. Somehow the touch event is being transferred to the below share button to launch the modal again. Is there anyway to prevent the event from bleeding through to the share button?
I had a similar issue with the Android stock browser. Whatever was underneath the close button for my modal would also get clicked shortly after tapping the close button.
Using the fastclick library on the app stopped this behaviour from happening, presumably due to the specific way it handles click events.
I am building a MMO which has a tutorial in it.
When the user tries to navigate away from the tutorial or close the tab/browser while on the tutorial, I need to show a custom popup which has a options as to why the person is quitting the tutorial.
I am familiar with the onbeforeunload event but my requirement is to display the custom popup instead of the browser default popup as it can't be customized other than changing the text message.
Is there any way I can hide the browser popup and show my custom popup instead.
I'd really suggest you use jQuery UI for this. It'll make your life much easier and has modal dialogs built into the API. See here: http://jqueryui.com/dialog/#modal
OK, what I said before was totally wrong. Must have been tired.
You can't override the onbeforeunload because of the way it fires in the DOM. This is a good SO explaining it.
How can I override the OnBeforeUnload dialog and replace it with my own?
I want to display 2 modal windows containing HTML content with jQuery.
But second modal window must be within the first.
So, here is main page, when I click link it opens first modal window, and then when I click a link in this modal window in opens second modal window.
I tried to do this with qTip, but I can't make second modal window.
I will be appreciate if somebody tells me how can I realize this. Thanks.
To me this sounds like an ui failure - modals within modals are not healthy for a user interface, and thus modal frameworks rarely support it.
If i was you I'd find another design rather than solve this problem programatically
I'd recommend the jQuery UI Modal Dialog, it should allow having two dialogs open at the same time.
qTip allows to open modal in modal.
Something is going wrong with your code.
Post it here and i can give you a solution!
I have a website with a flash image viewer. Once user clicks on flash button, I need to give a confirmation modal dialog before saving the file and if user clicks on OK only I have to pop file download dialog.
Confirmation dialog with in flash is not an option for me. So I have to invoke JS function to pop a confirmation.
Within the site, a custom DHTML confirmation modal dialog is used and it has two JS callback functions one for "OK" and the other for "Cancel" button click event handers. I have to use this modal dialog for this need.
With Flash player 10 security features, it is unable to pop flash file download dialog via JavaScript.
Simple JS confirm dialog works for me as I can return the user's action by calling JS function from flash as JS confirm dialog is a blocking dialog.
How can I implement same blocking type custom confirm dialog ?
You need to wrap your popup into a div.
Make this div the top element in your page, eg: using z-index.
And give a fixed position with a height and width of 100%.
You can leave it transparent or give some effect using semi-transparent colors.
If you have select elements in your page, they will go through this div.
To avoid this problem, you can put behind the div a transparent iframe with the same size.