I need to open ace:dialog or p:dialog (because IceFaces is a fork of PrimeFaces, and it's the same tag and attributes) in area where I've did the click with the mouse, but I don't know how to do this with JavaScript. How can I achieve this?
General: To open the dialog just call onclick="mydialog.show();" on the html element where the click should be possible..
If you want to show the dialog at the "click-position", maybe you should write your own javascript method to set the position..
Or easier, use the property "onShow" of the dialog to set the "position", which is also a property of the dialog.
Have a look here..
http://res.icesoft.org/docs/v3_latest/ace/tld/ace/dialog.html
Related
I'm using uk-modal on a project.
As you can see from the documentation, to open a modal via a link this is what you do:
Modal
I really need to have the bgclose:false set (so that the modal does not disappear on clicking on the background).
The point I need to reach is to open the modal via Javascript (and not on a link as above).
This is the normal script I would use (shortened):
UIkit.modal("#modal_loading").show();
On the documentation I cannot find the way of setting the bgclose to false via Javascript.
The workaround I made for now is to make an invisible (display:none) link as above and trigger its click event:
$('#open_loading_modal').trigger('click');
But this is ..... boring.
How do I set bgclose to false via Javascript?
I found the answer:
UIkit.modal("#modal_loading", {bgclose: false}).show();
I'm using alert() for javascript and would like to provide an image, i.e. alert(img); - where img is a variable for an image url.
You need to use custom alert box. By default it is not possible.
For example you could look at http://bootboxjs.com which allow to show nice alert with Bootstrap style
The alert box is a system object, and not subject to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Modal box does a lot of the work for you, see here
I have a primefaces dialog like this:
<p:dialog widgetVar="dlg" width="320" height="220" modal="false" closable="false" showHeader="false" resizable="false" position="right,top">
If I click on some element in my page I want to change this dialog to be modal. Is there a client side API for this?
Tried
onclick="dlg.setModal(true);"
with no success. Method setModal() does not exist.
Is it possible to change a dialog this way without roundtrip to the server?
You have attribute for this (modal) now it false set it madal="true"
Do you use Firefox with Firebug or some other browser / web developer tool that can show you the DOM element dlg?
There you can find that dlg has the methods show() and hide(), as well as enableModality()and disableModality(). These are (almost) what you want.
Unfortunately, enable... and disable don't (as one might think) set an option that makes the dialog become modal when shown. Rather they show or hide the "blackout" div. So when you want a dynamically modal dialog, instead of calling dlg.show() via Javascript, call dlg.enableModality(); dlg.show(), and vice versa for hiding.
Edit:
There is also the property dlg.cfg which contains some settings. It appears that if you simply set dlg.cfg.modal=true (whether that setting exists at the time or not), then the next time dlg is shown, it's modal (but, unlike setting it in your xhtml, it will still be draggable and resizable).
I'm trying to create a website and I've been trying to create something which will open new content when clicked on, somewhat like Facebook has on the pictures: You click, Get a window with the picture and text area for commenting. I'm specifically trying to avoid popups because I don't find them very neat.
Does anybody know how i could create this/ have any tutorials? Is this extremely complex?
Have a look at jquery ui:
http://jqueryui.com/demos/dialog/
You can not avoid a popup. The only difference is that using a javascript framework like jquery you can have a beautiful popup.
So use the jquery dialog box to display the image and textbox for commenting. Using ajax you can save the comment and exit the dialog box. The trick is to make good use of css and opacity on the dialog box.
I'm interested in alert boxes such as,
http://www.visual-blast.com/javascript/nice-alert-box-with-jquery-impromptu/
and
http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html
but with a different functionality, the user should be able to interact with the page even with the alert box present, so it needs to be movable and not obscure the underlying page, as in this example,
http://www.open-lab.com/mb.ideas/index.html
Alert box should be generated automatically on page view plus the title and message of the alert box should change with each page refresh from expandable library.
Is there anything out there like this?
Thanks
Sounds like the jQuery UI dialog widget might do what you need?
http://jqueryui.com/demos/dialog/
Here is an example with mootools. You easily can extend any element on the page to be draggable. You may use this plugin as a sample of alerts and you'll just need to remove some functionality and add make it draggable.
There are few custom dialogs in moo.rd. One of them is the Custom.Alert:
http://www.moord.it/examples/custom_alert