• 0

Modal [pl_modal] customize


Question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

18 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

    <!-- Button to trigger modal -->

    <a href="#myModal" data-toggle="modal"><img src="my full image url goes here" alt="" width="200" height="206" class="aligncenter size-full wp-image-371" /></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">

       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>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 http://demo.pagelines.me/tools/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Placed inside widget, works like a charm.

 

Thanks a lot Rob and James 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Can I safely paste it into a text widget?

 

Many thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Frederic - 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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny

 

Thanks.

 

I have just tried the code in a media box and something's not straight ... am I missing something?

 

On this page (media box with the pic on the right)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What code have you used ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

copied/pasted the one James gave above

 

 

 

<!-- Button to trigger modal -->
    <a href="#myModal" data-toggle="modal"><img src="http://seeduni.com/wp-content/uploads/2013/12/VBT-Paul-Hawkens-largest-mvment.jpg" 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>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny, I will do that.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now