Page 1 of 1
Making a popup MODAL
Posted: Wed May 01, 2019 8:12 am
by alex4orly
I have a page that pops up a dialog on top of it, using the WWB Link-> Popup
I want to prevent visitors from clicking outside that Popup resulting in bringing th eparent screen on top of the popup which makes it - dissapear...
How do I force this?
Thanks
Re: Making a popup MODAL
Posted: Wed May 01, 2019 8:24 am
by Pablo
Did you try the 'Dialog' object?
Re: Making a popup MODAL
Posted: Wed May 01, 2019 8:31 am
by alex4orly
No, where is that? In which group?
Re: Making a popup MODAL
Posted: Wed May 01, 2019 8:36 am
by alex4orly
Found the Dialog object, can I build into it the page I am showing the above URL, with layout grids and form an buttons?
Into that Dialog
Re: Making a popup MODAL
Posted: Wed May 01, 2019 9:03 am
by Pablo
You can add an inline frame to the dialog to show another page.
Re: Making a popup MODAL
Posted: Wed May 01, 2019 11:29 am
by alex4orly
Yes, that will work
Thanks
Re: Making a popup MODAL
Posted: Wed May 01, 2019 8:39 pm
by alex4orly
Well, I can't use that.
The page I am working on is loading a Payment Gateway, the provider does not allow that to be in an iFrame for security reasons.
I need to find a way to force that popup to be Modal, without an iFrame
Maybe set the Z-Index to 9999? But how?
Thanks
Re: Making a popup MODAL
Posted: Wed May 01, 2019 8:52 pm
by Pablo
Maybe set the Z-Index to 9999?
The z-index of what?
No matter what you do, you will always need an inline frame to display a page from another website.
Re: Making a popup MODAL
Posted: Wed May 01, 2019 9:11 pm
by alex4orly
Here is the sequence - point one is this:
https://communitylifestyleaccommodation ... money.html
Clicking the Membership button, brings up this popup dialog
https://communitylifestyleaccommodation ... rship.html - but click the button, don't follow the link to see the process
In this poup dialog - Clicking the Checkout is bringing up the payment page of the Gateway.
If this Membership.html page is placed inside an inline frame - the checkout button simply does NOTHING.
I want to force that Popup dialog to be Modal - so that the visitor does NOT click outside of it by mistake
Can I do it throu the z-index, if so where in the code and what is the code I need to add
Thanks
Re: Making a popup MODAL
Posted: Thu May 02, 2019 4:23 am
by alex4orly
I created the form inside a Dialog object, I use the LINK on the Membership button to call the page called mdialog.html
https://communitylifestyleaccommodation ... money.html
If I set the link to be _parent, it works - but cover the entire website
If i set the link to _self, it brings up that mdialog.html - but because it is inside an iFrame, the Checkout button does nothing
What are my options?
How can I make the mdialog to come up as a result of clicking the "Membership" button, just on its own - as a Modal Dialogue?
???
Re: Making a popup MODAL
Posted: Thu May 02, 2019 6:50 am
by Pablo
The dialog can be made modal via the 'Modal' property , this will ring it in front of all other elements on the page.
WWB will set the z-index to 9999 automatically via
Code: Select all
.ui-dialog.ui-widget
{
z-index: 9999 !important;
}
If the payment gateway does not work inside an inline frame then I think the only option is to break out of the frame (via target->_parent)
Re: Making a popup MODAL
Posted: Thu May 02, 2019 8:29 am
by alex4orly
Sorry,
Where exactly on the html page should I insert this ?
Thanks
Re: Making a popup MODAL
Posted: Thu May 02, 2019 8:54 am
by Pablo
You do not have to insert this code yourself. It will be added by WWB when you enable 'modal' property of the dialog.
Re: Making a popup MODAL
Posted: Thu May 02, 2019 9:04 am
by alex4orly
In the properties page of this, I do not see such an option, to set it Modal
On which TAB in the properties dialog?
Re: Making a popup MODAL
Posted: Thu May 02, 2019 11:29 am
by Pablo
'Modal' is a property of the 'Dialog' object.
Re: Making a popup MODAL
Posted: Thu May 02, 2019 11:33 am
by alex4orly
Ok, where do i set it?
I can't find it anywhere
Re: Making a popup MODAL
Posted: Thu May 02, 2019 1:16 pm
by Pablo
Re: Making a popup MODAL
Posted: Thu May 02, 2019 8:41 pm
by alex4orly
I see, you were talking about the Dialog object itself, I was talking about the html page to be Modal.
So, now that works - just the Membership button
https://communitylifestyleaccommodation ... money.html
Now, I need to sort out the 3 button action.
Those 2 topics are on the same page
Thanks
Re: Making a popup MODAL
Posted: Thu May 02, 2019 9:36 pm
by Psycho
What I don't get Alex is why you are using the membership button to call a modal on another page (mdialog.html) if you then close the modal on that page, you are left on a blank un-informative page, why not just call the modal directly from the page the buttons are on (clamoney.html) you can set the modal to be hidden from the start and then call it to open from any of the buttons.
Re: Making a popup MODAL
Posted: Thu May 02, 2019 10:36 pm
by alex4orly
Interesting name you have...
Yes, I agree and thought about the problem, but not clear what are you suggesting
What do you mean - call direct? The button is calling another html page that has the Dialog object on it
PLease explain
Thanks
Re: Making a popup MODAL
Posted: Fri May 03, 2019 6:46 am
by Psycho
Simply place the dialog box on the same page as the buttons (clamoney.html) and hide it - When the button is pressed (Set the action of the button to open the dialog box), the modal will ghost the rest of the page and the modal/dialog box will appear above everything else, when its closed, the page comes back to life
Re: Making a popup MODAL
Posted: Fri May 03, 2019 8:37 am
by alex4orly
OK, now I got it.
It works OK, now It behaves the same - so what is actually the advantage of doing it, other than it being on the same page?
My problem remains as to how to go back to theentry page once the payment step is completed...
Any suggestions?