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;
}
Related
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.
Prerequisites:
- JSF 2.1
- Primefaces 5.2
- Glassfish 3.1
Story:
I need my user to confirm FacesMessages of the errortype before he is allowed to keep working. For this i need some sort of modal message or dialog.
Question:
Is there some way of makeing a p:messages or a p:growl modal and confirmable?
What i've tried so far:
I've created a modal dialog which contains a p:messages component and a button to confirm/close the dialog again. The problematic with this solution is, that i have a lot of cases errormessages are shown and i have to open the dialog for each one individually. Besides that some errormessages are created by validators, some by the "required"-flag and some directly in the code. This makes it even harder to cover all cases. Id prefer to put the function into the component which displays the message (growl or messages).
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.
I am trying to implement popup window in web application, i found following resource very useful
http://www.scriptfx.com/windows/plain/simple.htm#7
but all the examples shown here having following
menubar/toolbar and address location.
In my html, i am calling high-chart to plot data points.
Structure of html
<html>
<body>
adding high chart plot by using div id.
<script>
script for plotting plot using high chart
</script>
</body>
I really don't don't need html only. I can simply do the same in popup window.
How can i generate a pop up window without such bars i.e. a plain html with option for closing window on clicking a button or cross on it.
You can't change the design of the Browser popup window, from your comment you just want to popup a simple html code so there is a lot of easy to use custom modals (popups) built using javascript.
try one of these (just a simple search for jquery modal window and you will find a lot)
Simple Modal
jQuery UI dialog
Thick Box
Bootstrap Modal
Edit
you can show your dialog this way ( jQuery UI )
<div id="popup" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information.</p>
</div>
<!-- button to show -->
Click to Show
javascript
$(document).ready(function(){
// show dialog on click
$('.showModal').click(function(){
$('#popup').dialog({width: 600,height: 600});
});
});
You cannot set window properties in HTML at all. All you can do in HTML to create popup windows is to use the target="_blank" attribute, but it only suggests that a link be opened in a new browsing context, which might be a new window, but these days it is more often a new tab.
What you are referring to is JavaScript code, not HTML. There are many resources, including SO questions and answers, on opening windows that way, as well on reasons for not doing so and using more advanced methods like modal dialogues.
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