How would I create a method for inserting Reveal Modals within the main Content Region?

1,078 Posts

mmcgee Reply #1, 11 years, 9 months ago

I'm using Foundation 5 Reveal Modal for popup. While I am comfortable creating chunks, TVs and TV selectors for a modal popup, I am a bit stumped on how to allow the site manager to create or insert a popup at random within any given block of text in the content TV.

I figured out that in modmore redactor, I can go to code view and just hard code the popup code, but that is going to make it a bit difficult for a site manager who is not comfortable with html. As well, redactor seems to be wanting to still surround items with p tags.

Is this a task that I should be using MIGx to solve?

Basically, my goal would be to allow the site manager to put content within a modal and then type in something like "click me for a modal" and be able to call up that modal.

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal">×</a>
</div>

[ed. note: mmcgee last edited this post 11 years, 9 months ago.]

24,544 Posts

BobRay Reply #2, 11 years, 9 months ago

I wouldn't be surprised if there's a MIGx way to do it, but I'd probably use a snippet like this (off the top of my head and untested):

[[!MakeModal? &modal_id=`MyModal` &modal_chunk=`MyChunk`]]

ModalOuterTpl chunk:

<a href="#" data-reveal-id="[[+modal_id]]">Click Me For A Modal</a>
 
<div id="[[+modal_id]]" class="reveal-modal" data-reveal>
  [[+modal_chunk]]
  <a class="close-reveal-modal">×</a>
</div>

/* MakeModal snippet */
$fields['modal_id'] = $scriptProperties['modal_id'];
$fields['modal_chunk'] = $modx->getChunk($scriptProperties['modal_chunk']);
return $modx->getChunk('ModalOuterTpl', $fields);

The site manager just has to create the chunk and then put the MakeModal snippet tag where it should appear.

It might be easier for the site manager if the paragraph text were in a text or richtext TV instead of a chunk, though I think it would be a tiny bit slower. In that case the placeholder in the outer Tpl would change to +modal_tv and the tag and snippet would look like this:

[[!MakeModal? &modal_id=`MyModal` &modal_tv=`MyTV`]]

/* MakeModal snippet */
$fields['modal_id'] = $scriptProperties['modal_id'];
$fields['modal_tv'] = $modx->resource->getTVValue($scriptProperties['modal_tv']);
return $modx->getChunk('ModalOuterTpl', $fields);

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

1,078 Posts

mmcgee Reply #3, 11 years, 9 months ago

Hi Bob:

I started doing some online PHP tutorials a few days ago—so what you've suggested makes way more sense to me today that it would have last week:)

Many thanks. Excited to try this out.

24,544 Posts

BobRay Reply #4, 11 years, 9 months ago

FYI, there is a beginning PHP primer in the appendix of my book. It's not worth buying the book for, but if you already have the book, it's worth reading. wink

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

1,078 Posts

mmcgee Reply #5, 11 years, 9 months ago

I do have the book and refer to it often. Actually looking at it now. I'm kind of bad though. I hunt and peck for what I need at any given moment:)
Starting to realize that my method is not necessarily the best approach—which is why I started up again with some of the lynda.com tutorials.

5,888 Posts

Bruno17 Reply #6, 11 years, 9 months ago

Of course, this could be done with MIGX.
See this tutorial:
http://rtfm.modx.com/extras/revo/migx/migx.tutorials/migx.varying-layout-boxes

Or more comfortable with modmore's ContentBlocks:
https://www.modmore.com/extras/contentblocks/

with both solutions the site-manager can add different layout-boxes and fill them with content.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

1,078 Posts

mmcgee Reply #7, 11 years, 9 months ago

Thanks Bruno: Not sure I would have picked out that tutorial, but I guess in a way I am creating layout boxes — they are just hidden until called up from the link on the page. Thanks for pointing me here. Have been wanting to give ContentBlocks a try, but still learning the ins and outs of redactor and installing custom css styles. Baby steps:) [ed. note: mmcgee last edited this post 11 years, 9 months ago.]

1,078 Posts

mmcgee Reply #8, 11 years, 9 months ago

Still working on a solution for this issue.

I think with MIGx, I can set up my columns to contain an ID name for each modal, and then a rich text region for content. I can create the outer chunk to contain the popup wrapper and placeholder for the content. Thus, a site manager could just click Add Item, to add popups for use anywhere on in the resource. Where I am kind of stuck with this plan is inserting the link that activates the popup into the text area of a resource content region. I can apply the "#" link in redactor, but it seems like the only way I can insert the data call (data-reveal-id="myModal" or data-reveal="myOtherModal", etc. ) is to type it in manually in Redactor code view. Still working with it though. Maybe I am overlooking some feature available in Redactor for handling something like this.
???

1,078 Posts

mmcgee Reply #9, 11 years, 9 months ago

I am still stuck with this issue. This might be something that is over my head at this juncture. I liken these modals to little popups. A popup here. A popup there. Click here for more info. Yadda, yadda, yadda. I'm trying to integrate the Zurb Foundation 5 version of a popup – called Reveal Modal. Maybe that's only adding complexity to the issue. I can certainly hard code these no problem, but it would be nice to set it up in the resource manager such that someone merely adding content to the site, can click a migx TV to Add a reveal modal, and then highlight some phrase in the rich text area and call up that modal by the id it's been assigned.

5,888 Posts

Bruno17 Reply #10, 11 years, 9 months ago

you can add a getImageList - call with &toSeparatePlaceholders=`mymodal` before the [[*content]]

then put placeholders like [[+mymodal.0]] [[+mymodal.1]] to the content.

See this Tutorial, which is kind of what your are trying:

http://rtfm.modx.com/extras/revo/migx/migx.tutorials/migx.fancybox-images-with-seperate-placeholders-in-richtext-content

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!