Sign Up for OSTraining

Welcome, Guest
Username: Password: Remember me

TOPIC: Customize size of Modal window

Customize size of Modal window 1 year 1 month ago #44361

  • lisaf
  • lisaf's Avatar
  • OFFLINE
  • OSTudent
  • Posts: 26
  • Karma: 0
I have created a modal and am trying to customize the size.

Below is the code I am using to change the size of the pop up window opened. It doesn't seem to be affecting the size of the window.

Can you please let me know if this code is correct or perhaps there is something else I need to change.

<a href="index.php?option=com_content&view=article&id=95:video-1&catid=83:video&Itemid=520" class="modal" rel="{handler: 'iframe', size: {x: 680, y: 370}}"> See Video<br /></a></p>

Thank you.
Lisa
Please become a member of OSTraining to reply to this post.

Customize size of Modal window 1 year 1 month ago #44377

  • Nick
  • Nick's Avatar
  • OFFLINE
  • Administrator
  • Posts: 16855
  • Thank you received: 395
  • Karma: 57
Hi Lisa,

The code looks correct. Makes sure to clear your browser's cache after making the change. If it still doesn't work for you, could we get a link to page to take a quick look?

Kind regards,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

Customize size of Modal window 1 year 1 month ago #44475

  • lisaf
  • lisaf's Avatar
  • OFFLINE
  • OSTudent
  • Posts: 26
  • Karma: 0
Still having problems ... in fact there are two problems now

1) Site bightlightsdemo.info

Home page in the welcome block see the link 'Video Test' I want to resize this modal here is the code i am using
<p style="text-align: justify;"><a href="index.php?option=com_content&view=article&id=95:video-1&catid=83:video&Itemid=520" class="modal" rel="{handler:'iframe',size:{x:380,y:170}}"> Video Test</a></p>

It doesn't seem to respond to the resize ..

2) Another site

brightlightsonline.com/fineline/index.php/our-services

See the link 'click here for more info' I am linking to an article.

The behavior of the modal is very bizarre. Right now it brings up a blank window - no content.

Previously, the modal brought up the article but contained the header, footer, etc. It contained the entire website page - not just the article.

I attempted an article modal with the first site (bightlightsdemo.info) Test Article link . Using the same code and it worked on that site.

Here is the code ...

<a href="index.php?option=com_content&view=article&id=44:you-and-your-stuff-group&catid=12:fine-lines" class="modal">Click here for more info.</a></p>

I am quite confused at the inconsistency in behaviour. Any insights on what may be going on.

Any assistance is greatly appreciated.
Lisa


Lisa
Please become a member of OSTraining to reply to this post.

Customize size of Modal window 1 year 4 weeks ago #44581

  • Nick
  • Nick's Avatar
  • OFFLINE
  • Administrator
  • Posts: 16855
  • Thank you received: 395
  • Karma: 57
Hi Lisa,

I just tested the modal popups on a test site and I could get the height and width working properly.

Even though you mentioned that your code is:
<a href="index.php?option=com_content&amp;view=article&amp;id=95:video-1&amp;catid=83:video&amp;Itemid=520" class="modal" rel="{handler: 'iframe', size: {x: 680, y: 370}}"> See Video<br /></a>

the actual output on your site is:
<a rel="{handler:'iframe',size:{x:380,y:170}}" class="modal modalizer_link cboxElement" href="/videos/95-video-1?ml=1" target="_blank"> Video Test</a>

Are you using other plugins for modals? If so, could you disable them so that we can test please? Also take out the extra classes and leave just "modal"

By the way, have you added the following code:
JHTML::_('behavior.modal');
to your template's index.php?

Kind regards,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

Sign Up for OSTraining

Powered by Kunena Forum

Open Source Training is not affiliated with or endorsed by the Joomla, WordPress or Drupal projects.
All product names and trademarks are the property of their respective owners.

Copyright 2013 Open Source Training, LLC. All rights reserved.