I open an $mdDialog
$scope.openDialog = function(){
$mdDialog
.show({
// ...
clickOutsideToClose: true,
controller: MyDialogController
})
.then(function(successData) {
console.log("Closed as success: " + successData);
// Closed as success: hidden_from_button
})
.catch(function(errorData) {
console.log("Closed as error: " + errorData);
})
.finally(function(closeData) {
console.log("On every close data: " + closeData);
});
};
function MyDialogController($scope, $mdDialog) {
$scope.hide = function(){
console.log("Close 1");
$mdDialog.hide('hidden_from_button');
}
}
I want to learn how to send parameters to the .finally and .catch functions of the $mdDialog. Specifically when the dialog is closed with the option clickOutsideToClose: true. I can't find a way to do it.
This is the relevant code of my dialog:
<md-dialog>
<md-toolbar>
<md-button ng-click="hide()">
</md-button>
</md-toolbar>
<md-dialog-content>
<!-- Some more code -->
</md-dialog-content>
</md-dialog>
I would like to be able to print the messages:
Closed as success: hidden_from_button (Which I already did)
Closed as error: data_passed_as_error
On every close data: data_passed_every_time
I tried adding to MyDialogController the function:
$scope.on("$destroy", function(ev) {
console.log("Close 2");
ev.preventDefault();
$mdDialog.cancel('data_passed_as_error');
}
But the printed output, from all related console.log of that action is:
Close 2
Closed as error: undefined
On every close data: undefined
Which tells me that the parameter is not being received. Besides that, if I use this fuction, after closing the dialog with ng-click="hide()", the last function is called as well. This is the output of all related console.log of clicking on close button:
Close 1
Close 2
Closed as success: hidden_from_button
On every close data: undefined
I want to handle properly the $mdDialog and be able to send data to the different .finally, .then and .catch functions of the promise it creates, without colliding with each other.
I need to send a special parameter when the user clicks outside the dialog to the parent controller. How do I do that?
I am creating an app and I want to open a dynamic popup when I click on a div.
So I used the code that is given by Framework7 at https://framework7.io/docs/popup.html#examples.
What happens is that nothing happens.
If I use the code for About Popup or Services Popup it works, but if I use the dynamic one nothing happens.
I even tried to add a console log inside $$('.dynamic-popup').on('click', function () { to check if it executes the function but nothing. No log.
Any Ideas?
Thanks.
I got the example working by assigning the click handler only after the DOMContentLoaded event has fired like so:
document.addEventListener("DOMContentLoaded", function(event) {
$$('.dynamic-popup').on('click', function () {
dynamicPopup.open();
});
});
Add this code in app.js
var dynamicPopup = app.popup.create({
content: '<div class="popup">'+
'<div class="block">'+
'<p>Popup created dynamically.</p>'+
'<p>Close me</p>'+
'</div>'+
'</div>',
on: {
open: function (popup) {
console.log('Popup open');
},
opened: function (popup) {
console.log('Popup opened');
},
}
});
Above code creates dynamic popup.
To call dynamic pop-up on click event.
$$('.dynamic-popup').on('click', function () {
dynamicPopup.open();
});
I want to display a Bootbox dialog that includes an "OK" button. When the user clicks the "OK" button, it should POST back, with the ID of the message to confirm that the user has viewed the message. The Bootbox dialog is the form. I don't see a way to make the dialog buttons a submit form with hidden fields, which is what I assume is the right way to accomplish my goals.
Thanks to the helpful comments from Isabel Inc and Mistalis, I have a working solution.
Notes specific to my implementation:
The messages contain images that need to be responsive, so I add the appropriate Bootstrap classes to each image
The messages may have links. Clicking a link is equivalent to clicking "OK" on the dialog
And the JavaScript that makes it happen...
jQuery(function($, window, bootbox, undefined) {
var accept = function(callback) {
$.ajax({
type: 'POST',
data: {message_id: 244826},
success: callback()
});
};
var $message = $('<p><img src="https://www.gravatar.com/avatar/80fa81938a6d1df92cd101d7fe997a71" alt></p><p>Here is a message from Sonny.</p>');
$message.find('img').addClass('img-responsive center-block');
$message.find('a').on('click', function(e) {
var href = $(this).attr('href');
if (0 === href.length) {
return;
}
e.preventDefault();
accept(function() { window.location.href = href; });
});
bootbox.dialog({
message: $message,
closeButton: false,
buttons: {
accept: {
label: 'OK',
callback: function() {
accept(function() { window.location.reload(); });
}
}
}
});
}(jQuery, window, bootbox));
I am using the Angular-ui/bootstrap modal in my project.
Here is my modal:
$scope.toggleModal = function () {
$scope.theModal = $modal.open({
animation: true,
templateUrl: 'pages/templates/modal.html',
size: "sm",
scope: $scope
});
}
One is able to close the modal by clicking the ESC button or clicking outside the modal area. Is there a way to run a function when this happens? I am not quite sure how to catch the sort of closing.
I know that I can manually dismiss a modal by having a ng-click="closeModal()" like this:
$scope.closeModal = function () {
$scope.theModal.dismiss('cancel');
};
Yes you can. It causes a dismiss event and the promise is rejected in that case. Also, note that the $modal.open() method returns an object that has a result property that is a promise.
With the promise you can...
//This will run when modal dismisses itself when clicked outside or
//when you explicitly dismiss the modal using .dismiss function.
$scope.theModal.result.catch(function(){
//Do stuff with respect to dismissal
});
//Runs when modal is closed without being dismissed, i.e when you close it
//via $scope.theModal.close(...);
$scope.theModal.result.then(function(datapassedinwhileclosing){
//Do stuff with respect to closure
});
as a shortcut you could write:
$scope.theModal.result.then(doClosureFn, doDismissFn);
See ref
The open method returns a modal instance, an object with the following properties:
close(result) - a method that can be used to close a modal, passing a result
dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
result - a promise that is resolved when a modal is closed and rejected when a modal is dismissed
opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables
'rendered' - a promise that is resolved when a modal is rendered.
Old question, but if you want to add confirmation dialogs on various close actions, add this to your modal instance controller:
$scope.$on('modal.closing', function(event, reason, closed) {
console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
switch (reason){
// clicked outside
case "backdrop click":
message = "Any changes will be lost, are you sure?";
break;
// cancel button
case "cancel":
message = "Any changes will be lost, are you sure?";
break;
// escape key
case "escape key press":
message = "Any changes will be lost, are you sure?";
break;
}
if (!confirm(message)) {
event.preventDefault();
}
});
I have a close button on the top right of mine, which triggers the "cancel" action. Clicking on the backdrop (if enabled), triggers the cancel action. You can use that to use different messages for various close events. Thought I'd share in case it's helpful for others.
You can use the "result" promise returned by $modal.open() method. As bellow:
$scope.toggleModal = function () {
$scope.theModal = $modal.open({
animation: true,
templateUrl: 'pages/templates/modal.html',
size: "sm",
scope: $scope
});
$scope.theModal.result.then(function(){
console.log("Modal Closed!!!");
}, function(){
console.log("Modal Dismissed!!!");
});
}
Also you can use "finally" callback of "result" promise as below:
$scope.theModal.result.finally(function(){
console.log("Modal Closed!!!");
});
In my case, when clicking off the modal, we wanted to display a prompt warning the user that doing so would discard all unsaved data in the modal form. To do this, set the following options on the modal:
var myModal = $uibModal.open({
controller: 'MyModalController',
controllerAs: 'modal',
templateUrl: 'views/myModal.html',
backdrop: 'static',
keyboard: false,
scope: modalScope,
bindToController: true,
});
This prevents the modal from closing when clicking off:
backdrop: 'static'
And this prevents the modal from closing when hitting 'esc':
keyboard: false
Then in the modal controller, add a custom "cancel" function - in my case a sweet alert pops up asking if the user wishes to close the modal:
modal.cancel = function () {
$timeout(function () {
swal({
title: 'Attention',
text: 'Do you wish to discard this data?',
type: 'warning',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
showCancelButton: true,
}).then(function (confirm) {
if (confirm) {
$uibModalInstance.dismiss('cancel');
}
});
})
};
And lastly, inside the modal controller, add the following event listeners:
var myModal = document.getElementsByClassName('modal');
var myModalDialog = document.getElementsByClassName('modal-dialog');
$timeout(function () {
myModal[0].addEventListener("click", function () {
console.log('clicked')
modal.cancel();
})
myModalDialog[0].addEventListener("click", function (e) {
console.log('dialog clicked')
e.stopPropagation();
})
}, 100);
"myModal" is the element you want to call the modal.cancel() callback function on.
"myModalDialog" is the modal content window - we stop the event propagation for this element so it won't bubble up to "myModal".
This only works for clicking off the modal (in other words clicking the backdrop). Hitting 'esc' will not trigger this callback.
Instead of ng-click="closeModal()" you can try ng-click="$dismiss()"
<button ng-click="$dismiss()">Close</button>
We can call jquery 'On' event as well in the controller like this. here "viewImageModal" is the id of modal popup.
constructor($scope: AuditAppExtension.IActionPlanScope, dataSvc: ActionPlanService, Upload, $timeout, $mdToast: any) {
$('#viewImageModal').on('shown.bs.modal', function (e) {
console.log("shown", e);
$scope.paused = false;
$modal.find('.carousel').carousel('cycle');
});
$('#viewImageModal').on('hide.bs.modal', function (e) {
console.log("hide", e);
return true;
});
}
I try to create a page with jquery modal and cookie. The modal work well but I have a problem to set cookie in it. I'd like to achieve the following:
On homepage load, display modal box (popup)
Popup close when close button is clicked and when user return the page, the modal box will not show.
Popup will show again after 7 days.
Please advice!
// Close modal when click on close button
$close.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
// querying the document
$(document).ready(function(){
if (document.cookie.indexOf('$close.click=true') == -1){
var sevenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + sevenDays);
document.cookie = "$close.click=true;expires=" + expires.toUTCString();
};
// Append data via Ajax
$.get('url', function(data){
modal.open({content: data});
});
});
when i should work with cookie i use this plugin
https://github.com/carhartl/jquery-cookie
You can use following structure of model
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.setPosition = function () {
// Set Postion
};
// Open the modal, reveal overlay
method.open = function (settings) {
if($.cookie('NameOfCookie'))
{
// We dont need show popup
return
}else{
// Open Modal
$.cookie('NameOfCookie', 'created', { expires: 7 });
method.GenerateModalPopup();
method.setPosition()
}
};
// Close the modal and overlay, then unbind the resize event when modal is closed
method.close = function () {
// Close Modal
};
method.GenerateModalPopup=function(){
// Generate the HTML and add it to the document
};
// Open popup window
method.open();
return method;
}());