Making a popup MODAL

[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

[Pablo]

Did you try the 'Dialog' object?

[alex4orly]

No, where is that? In which group?

[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

[Pablo]

You can add an inline frame to the dialog to show another page.

[alex4orly]

Yes, that will work
Thanks

[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

[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.

[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

[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?

???

[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)

[alex4orly]

Sorry,
Where exactly on the html page should I insert this ?
Thanks

[Pablo]

You do not have to insert this code yourself. It will be added by WWB when you enable 'modal' property of the dialog.

[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?

[Pablo]

'Modal' is a property of the 'Dialog' object.

[alex4orly]

Ok, where do i set it?
I can't find it anywhere

[Pablo]

[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

[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.

[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

[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

[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?