How to jump to top of browser page
You can set the scrollTop, like this: $(‘html,body’).scrollTop(0); Or if you want a little animation instead of a snap to the top: $(‘html, body’).animate({ scrollTop: 0 }, ‘fast’);
modal-dialog
How to handle the modal closing event in Twitter Bootstrap?
Updated for Bootstrap 3 and 4 Bootstrap 3 and Bootstrap 4 docs refer two events you can use. hide.bs.modal: This event is fired immediately when the hide instance method has been called. hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). And … Read more
Bootstrap Modal immediately disappearing
A Likely Cause This is typical behavior for when the JavaScript for the Modal plugin gets loaded twice. Please check to make sure that the plugin isn’t getting double loaded. Depending on the platform you are using, the modal code could be loaded from a number a sources. Some of the common ones are: bootstrap.js … Read more
Calling a function on Bootstrap modal open
You can use the shown event/show event based on what you need: $( “#code” ).on(‘shown’, function(){ alert(“I want this to appear after the modal has opened!”); }); Demo: Plunker Update for Bootstrap 3.0 For Bootstrap 3.0 you can still use the shown event but you would use it like this: $(‘#code’).on(‘shown.bs.modal’, function (e) { // … Read more
Multiple modals overlay
Solution inspired by the answers of @YermoLamers & @Ketwaroo. Backdrop z-index fix This solution uses a setTimeout because the .modal-backdrop isn’t created when the event show.bs.modal is triggered. $(document).on(‘show.bs.modal’, ‘.modal’, function() { const zIndex = 1040 + 10 * $(‘.modal:visible’).length; $(this).css(‘z-index’, zIndex); setTimeout(() => $(‘.modal-backdrop’).not(‘.modal-stack’).css(‘z-index’, zIndex – 1).addClass(‘modal-stack’)); }); This works for every .modal created … Read more
Twitter bootstrap remote modal shows same content every time
The problem is two-fold. First, once a Modal object is instantiated, it is persistently attached to the element specified by data-target and subsequent calls to show that modal will only call toggle() on it, but will not update the values in the options. So, even though the href attributes are different on your different links, … Read more
How can I display a modal dialog in Redux that performs asynchronous actions?
The approach I suggest is a bit verbose but I found it to scale pretty well into complex apps. When you want to show a modal, fire an action describing which modal you’d like to see: Dispatching an Action to Show the Modal this.props.dispatch({ type: ‘SHOW_MODAL’, modalType: ‘DELETE_POST’, modalProps: { postId: 42 } }) (Strings … Read more
Twitter bootstrap modal-backdrop doesn’t disappear
Make sure you’re not replacing the container containing the actual modal window when you’re doing the AJAX request, because Bootstrap will not be able to find a reference to it when you try to close it. In your Ajax complete handler remove the modal and then replace the data. If that doesn’t work you can … Read more
Bootstrap 3 modal vertical position center
.modal { text-align: center; } @media screen and (min-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: ” “; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } And adjust a little bit .fade class to make sure it appears out of the top border of window, instead of center
How to hide Bootstrap modal with javascript?
With the modal open in the browser window, use the browser’s console to try $(‘#myModal’).modal(‘hide’); If it works (and the modal closes) then you know that your close Javascript is not being sent from the server to the browser correctly. If it doesn’t work then you need to investigate further on the client what is … Read more