Jump to content


Photo
- - - - -

Modal [pl_modal] customize

modal customize image

Best Answer James B , 20 June 2013 - 07:51 PM

Hi there, you can put the full code into a widget inside your footer sidebar. The full code can go inside the widget

Go to the full post


  • Please log in to reply
18 replies to this topic

#1 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 19 June 2013 - 04:01 PM

Hi, I have a modal in my site that is started by clicking the default button

 

[pl_modal title="Modal" type="btn" colortype="info" label="Start"]Content[/pl_modal]
 
Is there any way to use this great modal feature but change the default button to a label link or image link?


#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 June 2013 - 09:41 PM

Hi there,

 

I've got a modal to launch from an image. But you'll need to use the modal html code from bootstrap and edit rather than use the shortcode.

Please Login or Register to see this Hidden Content



#3 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 20 June 2013 - 10:47 AM

Hi James,

thanks for your help!

I have an image in a column footer of my site, and it should pop-up the modal when clicked.

 

The button

<a href="#myModal" data-toggle="modal"><img src="url" alt=""  class="aligncenter size-full wp-image-371"/></a> 

I put it on the text widget inside column footer, no problem at all, and what about the modal structure?

<!-- 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">
       The content for your modal goes in here .....
        </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>

 

Where should I put it? Inside the text widget after the button?

Thanks for your help!



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 June 2013 - 07:51 PM   Best Answer

Hi there, you can put the full code into a widget inside your footer sidebar. The full code can go inside the widget



#5 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 29 June 2013 - 01:29 AM

Hi James,

If I put this code in my widget the modal wont display in the center of the screen, but in the center of the widget, in the footer :(



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 12:20 PM

You can place it into a Content Box (an add on section available free from our Store). Add the Content Box to your template for that page, then use the options for the page to add your code.  If you want it globally, then just use Dashboard > PageLines > Page Options.



#7 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 29 June 2013 - 12:37 PM

Hi Rob!

I didn't understand your point!

I have a image in one column footer and I want to click on it and display the [pl_modal title="Modal" type="btn" colortype="info" label="Start"]Content[/pl_modal]

without the standard button (an image instead)

Where the content box can be used in this context?

 

Thanks



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 12:54 PM

My apologies. Your opening topic did not explain that in any manner, so I was basing my reply from your initial description.  Please ignore my reply as it is incorrect in light of this.

 

In a footer column, you may add a text widget. In the text widget, you can add an image, using standard HTML img src...

 

I do not know that Bootstrap shortcodes allow for the modal call around your own images.  However, there are plugins that will allow modals to open when called by an image.  

 

You may want to search the Internet for some method of using a static image versus a button, label or badge, which are the three basic options found in our instructions at

Please Login or Register to see this Hidden Content



#9 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 01 July 2013 - 01:27 PM

I used the html code generated and copied it with firebug.

Placed inside widget, works like a charm.

 

Thanks a lot Rob and James 



#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 01 July 2013 - 10:07 PM

Hi Hugo, glad you got it working, thanks for updating the thread :-)



#11 agent654l

agent654l

    Member

  • Members

  • 14 posts
  • LocationTampa, FL
  • Country: Country Flag

Posted 04 January 2014 - 08:30 PM

Having issue with modal popup in DMS - you can see popup lightbox functionality but entire screen greyed-out without modal box focus z-index floating above background. ideas? I'm trying to place HTML in footer but even I try short code in main content post, still same problem.



#12 Danny

Danny

    Is Awesome!

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

Posted 05 January 2014 - 12:28 PM

@

Please Login or Register to see this Hidden Content

-  As I have mentioned on another topic, please create your own topic.



#13 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 15 February 2014 - 09:32 AM

Hi @

Please Login or Register to see this Hidden Content

, I want to use the code you have given above.

 

Can I safely paste it into a text widget?

 

Many thanks



#14 Danny

Danny

    Is Awesome!

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

Posted 16 February 2014 - 11:07 AM

@

Please Login or Register to see this Hidden Content

- You can add that code wherever HTML is supported. Therefore, I would recommend a MediaBox instead of a TextBox. The TextBox section should really only be used for text.



#15 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 16 February 2014 - 04:18 PM

Hi @

Please Login or Register to see this Hidden Content

 

Thanks.

 

I have just tried the code in a media box and

Please Login or Register to see this Hidden Content

... am I missing something?

 

On

Please Login or Register to see this Hidden Content

 (media box with the pic on the right)



#16 Danny

Danny

    Is Awesome!

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

Posted 16 February 2014 - 05:22 PM

What code have you used ?



#17 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 17 February 2014 - 02:06 AM

copied/pasted the one James gave above

 

 

 

<!-- Button to trigger modal -->
    <a href="#myModal" data-toggle="modal"><img src="

Please Login or Register to see this Hidden Content

" alt="VBT-Paul-Hawkens-largest-mvment" width="500" height="354" class="aligncenter size-full wp-image-9315" /></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">
<iframe width="420" height="260" src="//www.youtube.com/embed/mv1TVpAyvfc" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        </div>


#18 Danny

Danny

    Is Awesome!

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

Posted 17 February 2014 - 12:58 PM

It looks like there is a conflict, when using the HTML method, this was apparently fixed a few months ago.

 

I think the best alternative would be to use a lightbox plugin, as it is a simpler method.

I will report this, but using a plugin is the best method.



#19 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 18 February 2014 - 03:05 AM

Thanks @

Please Login or Register to see this Hidden Content

, I will do that.







Also tagged with one or more of these keywords: modal, customize, image