(Solved) Action Script to Open Modal Form

  • nobicycle
  • Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 114
  • Thank you received: 1

nobicycle created the topic: (Solved) Action Script to Open Modal Form

Hi Crosstec Support.

I have seen how to create a modal window link:
Enter JHTML::_( 'behavior.modal' ); in the template index.php
and use a link such as
<a class="modal" title="My Form" href="index.php?option=com_breezingforms&amp;ff_name=googlemaps&amp;tmpl=component" rel="{handler: 'iframe', size: {x: 570, y: 200}}">My Form</a>

This works nicely.

But what I want to do is trigger this modal when a button or field is clicked in a different form.
What do I place on the field (named gps)
The code below triggers a googlemaps form, but it is not modal.

function ff_gps_action(element, action)
{
switch (action) {
case 'click':
location.href="index.php?option=com_breezingforms&ff_name=googlemaps&tmpl=component";
break;
default:;
} // switch
}


best wishes
#192728
  • Posts: 2666
  • Karma: 76
  • Thank you received: 329

lovre replied the topic: Action Script to Open Modal Form

Hi,

You could use some css like this:
.mymodal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 );
}
add a mymodal div to the page intro and then load the document into the div and show it on click.

If you need any help with this let us know.

Regards,

Lovre

Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===========================================
Need to renew Pro Support?
Buy Here!
===========================================
Satisfied?
Consider a membership!
===========================================
Like us on Facebook
===========================================
#192833
  • nobicycle
  • Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 114
  • Thank you received: 1

nobicycle replied the topic: Action Script to Open Modal Form

Thank you lovre.

I had a go at this but failed. So I would appreciate your help.
I created a couple of forms on the website called:

1. Calling Form, with field "Read Only Field" and button "Call Form"
2. Called Form - just contains one field called 'Data Entry"

At the moment when button "Call Form" is pressed it calls "Called Form" but not in a modal way. (I removed all my attempts at CSS, form scripts and pieces). The site is a fresh install of Pulse kickstarter with one change: The latest breezing form component and plugin were installed and the old free versions shipped with the template were uninstalled.

The intention is: button click -> modal form -> Data entry+ submit -> transfer 'Data Entry" data to "Read Only Field"

"Read Only Field" is not read only because I didn't know whether could configure it in the form as read only and have the scripts still work.

One last thing - I don't know why but Form Preview does not work - a window pops up but nothing is visible. I stress this is a fresh Pulse kickstarter (sent by Tome via email today) with updated BF.

If you get this working I believe the package which is generic will be useful to many people.

Best wishes
Credentials sent
#192886
  • Posts: 2666
  • Karma: 76
  • Thank you received: 329

lovre replied the topic: Action Script to Open Modal Form

Hi,

I've made a example form.

There's this in the init script:
function ff_ModalForm_init()
{
jQuery(".mymodal").load("index.php?format=html&tmpl=component&option=com_breezingforms&ff_form=2&ff_page=1"); // Load form in Modal

jQuery(document).keyup(function(e) { //Get Esc to hide the Modal
     if (e.keyCode == 27) { // escape key maps to keycode `27`
       jQuery(".mymodal").css("display", "none");
    }
});
}

There's this in the Elements' actionscripts:
function ff_clickMe_action(element, action)
{
jQuery(".mymodal").css("display", "block");
} // ff_clickMe_action
There's this in the before form (you can add this to some css file):
echo '
<style>
.mymodal {
    display:none;
    position:fixed;
    z-index:1000;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
    background: rgba( 255, 255, 255, .8 ) ;
}
</style>
';
And there's this in the Section's description:
<div class="mymodal"> </div>

Please test the package and let us know how it works for you.

Regards,

Lovre

Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===========================================
Need to renew Pro Support?
Buy Here!
===========================================
Satisfied?
Consider a membership!
===========================================
Like us on Facebook
===========================================
#193148
Attachments:
The following user(s) said Thank You: nobicycle
  • nobicycle
  • Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 114
  • Thank you received: 1

nobicycle replied the topic: Action Script to Open Modal Form

Hi Lovre

Thanks for that.
I see all those parts.
The Called Form was missing from the package, so I created one (with id=2 and one page =1) with a check box "Set Switch Me To No" (because I want to test setting the radio box on the Modal Form, on submit). Unfortunately the Called Form was not modal. I know this because I set height:50% and width:50% in the css and I was able to click url's in the main menu.

Best wishes

By the way, since you do not need my dev website I will try and diagnose the problem with the Pulse Kickstarter provided by Tome - it works when first installed but if I remove the free BF and install BF, then the form editor will not in show preview. I will raise it with Tome if I can't fix it.
#193173
  • Posts: 2666
  • Karma: 76
  • Thank you received: 329

lovre replied the topic: Action Script to Open Modal Form

Hi,

I'm sorry, I don't quite understand, do you need any further help setting this up?

This is a basic example, some tweaking will be needed to get the polished look.

Regards,

Lovre

Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===========================================
Need to renew Pro Support?
Buy Here!
===========================================
Satisfied?
Consider a membership!
===========================================
Like us on Facebook
===========================================
#193178
Moderators: ForumSupporttomeperica
Time to create page: 0.079 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here