Jump to content


Photo
- - - - -

Calling Modal From Text Link Or Custom Image Link


Best Answer James B , 19 December 2012 - 11:48 PM

Hi Thom, i've found the code that i had on the other site to open the modal from a text link

 

 
 <!-- Text to trigger modal -->
    <a href="#myModal" class="texttrigger" data-toggle="modal">Text launches modal</a>
     
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p>One fine body…</p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>
Go to the full post


  • Please log in to reply
8 replies to this topic

#1 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 19 December 2012 - 10:01 PM

I've created a login/registration/reset password modal. Go here: www.bringtheharvest.com and click on the login button in the sidebar to see it. 

 

(1) I want to be able to call up the modal with a standard text link, one of which will be placed in my footer, and several of which will be placed in the body of various pages throughout the site. 

 

(2) I want to be able to call up the modal with a custom rollover image designed to match my top-level nav, which I'll then hook up there next to them, and create a conditional: if logged in, then don't show. 

 

James has been helping me try to figure this out. One of the things he suggested was just to copy and paste the modal's full html, but I tried that in the footer and I can't figure out how to create an actual link to it. 

 

Another thing I did in the footer, which I'll have up there now for you to see, is to just do another standard button shortcode in the footer, then remove the button type, leaving just the text link behind. This worked, but then when I called up the modal with the text link, some of my css customizations were quite awry and also the login/register/reset password tabs were inoperable, so they could only see the login tab. It's not a problem with the footer widget, because it's an enhanced text widget, which accepts all kinds of code. 

 

Any ideas? So I think I can achieve (1) just by removing "type=btn" from the shortcode, but in my footer, the modal doesn't function properly. I may end up having the same problem when I move the one that works from the sidebar (where it currently is) up to the nav section with a hook.



#2 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 19 December 2012 - 11:10 PM

Update: It seems to be that I can't have the same modal more than once on a page with full functionality. Right now I have a button and a label in my sidebar. I copied the entire modal from the button instance, and created a second label instance. The original button's modal has full functionality. The new label version, however, does not. It open up the modal but the tabs don't function, just as with the case of the footer's instance of the modal. I tried giving the button and label in the sidebar different IDs in the shortcode; that didn't work. 



#3 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 19 December 2012 - 11:37 PM

[removed comment]



#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 December 2012 - 11:48 PM   Best Answer

Hi Thom, i've found the code that i had on the other site to open the modal from a text link

 

Please Login or Register to see this Hidden Content


  • thomstark, batman and globalnative like this

#5 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 19 December 2012 - 11:49 PM

I'll try that real quick. Thanks.



#6 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 19 December 2012 - 11:55 PM

That works great! Thanks, James. Now the BIG problem is that I can't have more than one instance of the same modal on the page. If you go to my sidebar right now, there are three modals (all the same content). The first is the text link I just created, thanks to you. The second, a button. The third, a label. The text link modal works correctly, I assume because it's the first instance. On the other two, though, the tabs don't work. The tab titles change their status from inactive to active, but the tab panes themselves don't change. And the problem gets worse in the footer "login" link, where my CSS gets all messed up in addition to the tabs not working. Help?(!)



#7 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 20 December 2012 - 01:18 AM

Problem solved. Rather than repasting the same modal content more than once on the same page, I just reuse that HTML link anywhere I want, as many times as I want, and that link calls up the same instance. 

 

One thing though: If I put the modal content in either the branding/header or the footer, it'll screw up my CSS styling (I'm assuming because those sections don't call all of the same CSS files --or something--). So as long as I put my one instance of the modal in the main body somewhere, I can call it up from the branding, from the footer, wherever, and it all works perfectly. Thanks, James!



#8 globalnative

globalnative

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 11 November 2013 - 09:41 AM

 

Hi Thom, i've found the code that i had on the other site to open the modal from a text link

Please Login or Register to see this Hidden Content

 

Thanks for this, loving the option to have a modal popup as text!

 

Only thing is when it pops up it greys out the whole screen, modal included. Something to do with this html: 

<div class="modal-backdrop fade in"></div>

 

Any ideas? Screenshot link:

Please Login or Register to see this Hidden Content



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 13106 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 November 2013 - 01:05 PM

HI,

 

This is because as far as I know you're using the HTML, this causes a conflict with the shortcodes scripts (I think).

If you wish to have a modal work with text, the simplest method is to use a plugin such as lightBox for Wordpress or FancyBox.