There is an attribute named modal in Dialog component of PrimeFaces. Checking the user guide, it just says it controls the modality of the component. But I just don't get it and want to know what it actually means.
Modal = True means that the dialog is displayed in the foreground and nothing in the background is clickable. You MUST take action on the dialog to dismiss it to continue using the page in the background. A Non-modal dialog obviously lets the user interact with the page behind the dialog while the dialog is displayed.
Related
I'm using Angular Material in my AngularJS project and want to replace the alert windows (opened by alert() function) with the Angular Material dialog so that the style will be consistent.
I've gone through the demos and documents provided by Angular Material and bound the function to ng-click.
<md-button class="md-primary md-raised" ng-click="showAlert($event)" >
Save
</md-button>
The button is inside a popup Kendo window, opened by kWindow.open() function.
var windowInstance = $kWindow.open({
/// Logic omitted
});
In my current logic, when the button is clicked, a service will be called to post data to the server. After that I want to show the alert with the message "Saved successfully". The problem is that, the Angular Material dialog will be covered by the popup window.
How can I fix this issue so that the dialog will display on the top as the alert window does?
I investigated and found that I can set the z-index property of the Angular Material dialog in the CSS file to change the layer height. In my case, 10000 is still covered by the window, while 20000 works correctly.
.md-dialog-container {
z-index: 20000;
}
I have a couple of form definitions in my main HTML file.
I would like to display these forms in a modal window, when the user performs certain action, such as click on an icon.
I have followed an article on how to do it for links (hrefs). But now my requirement is to get the same working for clicking on an icon.
Thank you,
Harriet
The answer is to write a java function, that will explicitly set the location of the window to where you want the url to point - example:
function openPreferences() {
window.location = '#openPreferences';
}
I think the most simple solution would be to create a LinkBlock Element and set the Background to the Icon's Image, which will allow you to turn it into a Link, thus further allowing you to open your Modal Window with it.. Simply create your Modal as Display None, and upon clicking the LinkBlock (with your Icon as the Background), make it change the Modal property to Display Block, etc.
Primefaces 4.0
If there are unsaved changes on the page, I would like to show Primefaces' confirmation dialog on browser back / close button click. I am not sure how to achieve this.
window.onbeforeunload always shows the browser's alert box. I need to override it with Primefaces' confirmation dialog.
I'm making a custom MessageDialog. The dialog shows information to the user and waits for button press. I call my dialog asynchronasly with await but my problems is that meanwhile the focus is set to an element in the background (behind the popup). If I use the standart MessageDialog the focus is set again but after the the dialog is closed (The focus is set but the ui is not updated until the dialog is closed). I would like to achieve the same behavior.
My dialog is based on the InputDialog from WinRT XAML toolkit.
Thanks
I'm working on a button script for my page.
I want the "OK" button from alert dialogs.
Any Idea on how to do it?
I want the dialog be on the screen until the person refreshes the page.
I'm trying to make it in html5.
Thanks
It's impossible. You need use a custom dialog.