We Keep Coding

Auto close a Modal Popup instead of using a button/on-click

I currently have a page that is refreshing and I want to place a modal popup on the screen that gives the user a message such as "Please wait...". The reload is being performed with a $state.reload().
GenericModalService.confirmationSplit($rootScope, modal);
$state.reload();
function confirmationSplit(scope, modal) {
scope.modal = modal;
scope.modalInstance = $uibModal.open({
templateUrl: 'Scripts/app/Modals/ConfirmationSplit.html',
scope: scope,
size: 'md',
backdrop: modal.backdrop != null ? modal.backdrop : true,
})
}
Is there a way that I can close the modal once the $state.reload(); finishes? If not, is there a way that I can set an auto-timer for about 2-3 seconds and then have the modal close without the need to close/dismiss the modal using a button?

Bootstrap uses a jquery plugin to manually manage modals, I think in your case there are 3 useful methods:
// NOTE: I'm assuming the modal's id is #message
//show a modal:
$('#message').modal('show');
// close a modal:
$('#message').modal('hide');
//capture 'modal shown' event:
$('#message').on('shown.bs.modal', function (e) {
// do something...
})
You can use the above pieces of code to manually show the modal and to hide it after the reload event ended.
if you can't catch the reload ended event you can easily set up an interval once the modal has been shown and close it after a set amount of time like this:
$('#message').on('shown.bs.modal', function (e) {
console.log('modal has been shown');
setTimeout(function () {
console.log('closing modal...');
$('#message').modal('hide');
}, 3000)
})
related bootstrap doc: https://getbootstrap.com/docs/4.0/components/modal/#via-javascript

Angular ui bootstrap modal call close function when closing from overlay

How can i run the same function when the user is closing the modal from the overlay?
For example now i have close button with this function:
close() {
this.$modalInstance.close();
this.AlertService.reset();
}
But when the user close the modal from the overlay this function does not run.

Take a look at the angular bootstrap documentation.
$modal.open returns a modal instance, with one parameter being 'result'. This is a promise triggered when the modal is dismissed.
var $modalInstance = $modal.open({ ... });
$modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Also, note the modal.closing event which is broadcast before closing, and can be used to prevent closing with 'event.preventDefault'.

Loading dynamic content into Bootstrap Popover after form submit

I'm trying to load content dynamically into a Bootstrap popover. When the form is submitted I can alert the value; that's working correctly. What I can't do is get the content of #popover-thanks to load in the popover, replacing the form with a thank you message.
// show the popover
$('#btn').popover({
html : true,
placement: 'top',
content: function() {
return $('#popover-form').html();
}
});
// form has been submitted
$(document).on('click', '#submit', function() {
var value = $('#value').val();
alert(value);
$('#btn').popover({
html : true,
content: function() {
return $('#popover-thanks').html();
}
});
});

i think you must Destroy the first popover to be able to make new one on same element:
$( '#btn' ).popover('destroy');
http://getbootstrap.com/javascript/#popovers-usage
Another solution, you can get the popover id (after show) like that:
var popoverID = $( '#btn' ).attr("aria-describedby"); // = 'popover123456' (random number)
replace the content (http://getbootstrap.com/javascript/#popovers), and then show it:
$( '#btn' ).popover('show');

How destroy Boostrap 3 modal dialog from DOM

I call content for modal dialog from ajax
$.ajax({
url: "/Clerk/PauseServiceDialog",
success: function (data) {
$("body").append(data);
$("#pauseServiceDialog").modal({ keyboard: false });
}
});
When I close modal I use this code
$(document).on('hidden.bs.modal', ".modal", function (e) {
this.remove();
});
In firebug I see html code is deleted. But if I again call dialog and use some event I get 2 event. How I understand modal dialog do not correct deleted from DOM.

I found answer how fix duplicate event.
$(document).on('hidden.bs.modal', ".modal", function (e) {
var name = "#" + $(this).find("button.btn-primary").attr("id");
$("body").off("click", name);
$(this).remove();
});

You can hide modal by code
$("#pauseServiceDialog").data('bs.modal').hide()
P.S. sorry, i didn't understand notation $(document).on('hidden.bs.modal' in general - you should delete modal element AND object which handle its events ( it stored at $("#pauseServiceDialog").data('bs.modal') )

Close dialog box from within AJAX loaded content

I have a jquery ui dialog that loads its content via ajax:
$('#register').click(function(e) {
var tag = $('<div></div>');
$.ajax({
url: 'signup.html',
success: function(data) {
tag.html(data).dialog({modal: true}).dialog('open');
}
});
e.preventDefault();
return false;
});
I have a second script within the content that is supposed to close the dialog when the submit button is pressed
$(function() {
$('form #submit').click(function(e) {
$(this).parents('.ui-dialog').dialog('close');
e.preventDefault();
return false;
});
});
When i click the submit button, i get the error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
What is it that i am missing to allow me to close the dialog from the content that has been loaded via ajax?

You have to call dialog('close') on the element where dialog('open') was called before. You're calling the function on$('.ui-dialog')instead of$('.ui-dialog ...')`.
You should define id or class for the tag element in your code:
var tag = $('<div id="signup-id"></div>');
Then find the correct element in click handler like this:
$(this).parents('.ui-dialog').children('#signup-id').dialog('close');
Note: You can find #signup-id in click handler directly like $(this).children('#signup-id') if you're sure that signup.html never contains element with signup-id id.

Define you tag dialog in html
<div id="tag_dialog" style="display:none">
</div>
then on document ready:
$(document).ready(function(){
$('#tag_dialog').dialog({
modal:true,
autoOpen:false,
//you could give some other options such as width, height .....
});
$('#register').click(function(e) {
$.ajax({
url: 'signup.html',
success: function(data) {
$('#tag_dialog').html(data).dialog('open');
}
});
e.preventDefault();
return false;
});
$('form #submit').click(function(e) {
$('#tag_dialog').dialog('close');
e.preventDefault();
return false;
});
});