Uk-modal set bgclose via javascript - javascript

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();

Related

Trigger not working on newly created link

I am using the fasw javascript library - http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/ - to do page transitions in a webapp. It can only appear to be triggered via a data attribute on a link.
$('body').prepend('<a class="decider_link_trigger" href="#">[Trigger]</a>');
$('.decider_link_trigger').attr('data-ftrans', 'flip');
$('.decider_link_trigger').attr('href', selected.result);
$('.decider_link_trigger').trigger('click');
The above code adds such a link to the page with the provided data-ftrans attribute and is even clickable manually, but I can't figure out how to submit the link with jQuery (or event Javascript).
I cannot do a manual window.location.href = selected.result; as this will not use the transition library.
Thanks!

Changing URL on AngularJS without transitioning state for a particular link, but keeping the URL in the link

I have a link which has two actions. When I click on it, it opens a modal box via "ng-click", but it also transitions state via its "ng-href".
The modal box opening is intended. The state transition is not. However I need the URL in that state transition to persist.
When I try to use $locationChangeStart to prevent the state change, it also prevents the URL from changing. This is not preferable. I've also researched a bit, and found potential solutions in "reloadOnSearch". However it doesn't possible to point to a particular link. Not all of the links on the page do this, the other links are all normal links. Furthermore I don't know how to use reloadOnSearch with ui-router.
The feature I'm trying to implement is similar to Pinterest's overlay of items. When you click on the item, they open up a modal box and change the URL, but the underlying page doesn't change. This allows the end user to copy the URL and share it with their friends, and when they access it, it will actually go directly the item page and not the overlay.
I'm currently using ui-router if that makes anything easier.
Hopefully somebody has a solution?
You can try angular ui bootstrap modal for better integration with angularJS.
Take a look at an example in http://angular-ui.github.io/bootstrap/
Or you may open a modal via data-target="#abc" instead of href="#abc"

How to open <ace:dialog> or <p:dialog> by JavaScript?

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

Modal Windows using jQuery

I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?
As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there
You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.

Trouble having a modal dialog to open a secondary dialog

I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal).
However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.
If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.
It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.
Help!
By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:
YAHOO.widget.Overlay.prototype.bringToTop = function() { };
That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:
this.bringToTop = function() { };
If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.
The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?

Categories