Trying to close a modal popup and remove the overlay as well when the user pushes the ESC key.
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('.create-folder').toggle();
}
});
The modal window is triggering closed, but the overlay remains, covering the page.
What you are doing is just hiding the div. What you should do instead is to programatically close the modal using
$.modal.close();
or your
myModalObj.close();
If your using a Jquery dialog window just do:
$( ".create-folder" ).dialog( "close" );
just like you already probably called
$('.create-folder').dialog("open");
The solution was
$(document).keyup(function(e) {
if (e.keyCode == 27) {
//hides modal overlay background when escape key pressed
$('.modal-overlay').hide();
//hides all modal boxes when escape key pressed
$('.modal').hide();
}
});
Related
I'm trying to prevent my popover closing or doing anything on ESC click, is there any setting I can use or what would be the best way to program this using the beforeClose function.
The Popover Element itself doesn't provide a way to cancel the event on beforeClose nor an API method to cancel the close event on ESC.
Add a keydown event listener to the Popover on afterOpen and cancel the event there:
var popoverid = '__popover25';
var popoverElement = sap.ui.getCore().byId(popoverid);
popoverElement.attachAfterOpen(function() {
$("#"+popoverid).keydown(function(e) {
if (e.keyCode === 27) {
return false;
}
})
})
I am working in ionic when i install application in android device the hardware back button was not working, after some R & D i got solution to register back button i have done it. but my problem is when select option popover is open and i press back button then it dismiss the popover that's OK but when i want to reopen select option after pressing hardware back button i'm unable to open it. registering back button uses some condition to check active portals and dismiss the active portal if any found. but it does not allow to open select option again. can anyone help me to solve this issue? my code is below...
platform.ready().then(() => {
// this.config.pullVersion();
let ready = true;
// to handle hardware back button in android
platform.registerBackButtonAction(() => {
console.log("Back button action called");
let activePortal = ionicApp._loadingPortal.getActive() ||
ionicApp._modalPortal.getActive() ||
ionicApp._toastPortal.getActive() ||
ionicApp._overlayPortal.getActive();
let view = this.navCtrl.getActive();
if (activePortal) {
ready = false;
activePortal.dismiss();
activePortal.onDidDismiss(() => { ready = true; });
console.log("handled with portal");
return;
}
if (menuCtrl.isOpen()) {
menuCtrl.close();
console.log("closing menu");
return;
}
if (this.navCtrl.canGoBack()) {
this.navCtrl.pop();
console.log("poping back");
return;
} else {
console.log("exiting from app");
platform.exitApp();
console.log("poping back");
}
}, 1);
});
and select-option
<ion-select interface="popover" [disabled]="isStarted" [(ngModel)]="routeName" class="custom-option-btn" (ionChange)="optionsFn();">
<ion-option value="" selected disabled>select Route</ion-option>
<ion-option *ngFor="let cg of routeData;let idx = index" [value]="cg">{{cg.routeName}} </ion-option>
</ion-select>
this got dismissed in back button event and does not open select option again
ionicApp._overlayPortal.getActive()
I've been searching a lot about this topic, and Ionic Team hasn't developed a solution for this yet (I know it's been 3 years now). It seems that the only way we have to dismiss an ion-select is by using the 'cancel' button inside the selector.
Any other way, using platform.backbutton, or anything in IonicApp module won't let you do what you need.
The only real solution i can think about is creating a new Modal, only for the select, and implement your own scroll and selectable items, and then use ModalController.dismiss() to dismiss the select, as if you were pressing cancel inside the ion-select.
How can I prevent ionic keyboard from hiding when I press a specific button in my Ionic 1 app?
This solution doesn't work for me, the keyboard remains open wherever I click.
A possible solution can be found here (the same link sent by Sahil Dhir). I also had this problem and this solution worked for me.
The directive is:
angular.module('msgr').directive('isFocused', function($timeout) {
return {
scope: { trigger: '#isFocused' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
element.on('blur', function() {
element[0].focus();
});
});
}
});
}
};
});
Its usage is:
<input type="text" is-focused="true">
What it basically does is to watch the focus of the input and whenever the input loses focus (when you press a button on the screen outside the keyboard, for example) it rapidly assigns the focus back to it. So the keyboard doesn't have time to hide.
Hope it works for you too!
In my current usecase, I am trying to use angular-ui modal window to show the progress of calculations that we do in a background process which we disable on completion.
All works well. I just want to disable user from clicking any of element in background.
Any idea how can we do this?
You can pass the following options, when opening a modal window, to prevent users from closing the window:
backdrop: 'static' - top prevent users from closing a modal on backdrop click
keyboard: false - so users can't close a window by pressing ESC
Full documentation here: http://angular-ui.github.io/bootstrap/#/modal
I just want to add an example with code and extend pkozlowski.opensource answer,
Check this example:
var modalInstance = $modal.open({
templateUrl: '/views/registration/loginModal.html',
controller: LoginModalInstanceCtrl,
windowClass: 'login-modal-window',
resolve : {
credentials : function(){ return {email :'', password:''}; }
},
backdrop: 'static', /* this prevent user interaction with the background */
keyboard: false
});
modalInstance.result.then(function (res) {
}, function () {
/* cancel */
$state.go('home');
});
I don't use tab panel just tab bar, and have to prevent changing tab by some criteria.
In ExtJS docs I found change event for Ext.tab.Bar, but it fires when tab is already changed. So preventDefault() and return false are not working in this case.
Second I tried is set Ext.tab.Tab.handler property when tabs were initialized, but it fires when tab button is already clicked. So preventDefault() and return false don't work too.
Can ony body help with this? How can I prevent changing tabs using only Ext.tab.Tab and Ext.tab.Bar?
Thx.
I think you can use the 'beforetabchange' event on the tab panel itself.
From sencha docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel-event-beforetabchange .
Return false in any listener to cancel the tabchange.
Edit
Maybe you could then extend the Ext.tab.Bar component and register the beforechange event by modifying the setActiveTab method, I think it's a pretty easy modification
setActiveTab: function(tab) {
//test the beforechange return
if (tab.disabled && me.fireEvent('beforechange', tab) === false) {
return;
}
var me = this;
if (me.activeTab) {
me.previousTab = me.activeTab;
me.activeTab.deactivate();
}
tab.activate();
if (me.rendered) {
me.layout.layout();
tab.el && tab.el.scrollIntoView(me.layout.getRenderTarget());
}
me.activeTab = tab;
me.fireEvent('change', me, tab, tab.card);
}
Add a controller action "beforeshow" on the tab panel container and disable the listeners. Allows the tabs to behave normally without clickability.
component.down("#tabPanel").tabBar.clearListeners();