Jump to content

Archived

This topic is now archived and is closed to further replies.

hugo2808

Modal [pl_modal] customize

Recommended Posts

hugo2808    1
hugo2808

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
James B    436
James B

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>

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hugo2808    1
hugo2808

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hugo2808    1
hugo2808

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hugo2808    1
hugo2808

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
Rob    547
Rob

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/


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hugo2808    1
hugo2808

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
agent654l    2
agent654l

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

What code have you used ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
    • reklov79
      By reklov79+
      Hi,
      Meganav seems to have a bug if you upload a Logo with a higher resolution (which actually is useful as it looks then sharper on mobile phones). But on mobile the Logo is then larger than on a desktop. Problem is the following code in the meganav style.css. Simply the "height: auto !important" needs to be removed.
      @media (max-width: 480px) { style.css?ver=5.0.14:133 body .meganav-logo img{ height: auto !important; } } But how to achieve that? What is the standard method for customizing that? Overriding via CSS / LESS doesn't work - in this case especially because of the !important derictive used in the original CSS I believe.
      Changing the original CSS is something I don't want to do as it leads into issues when upgrading.
      Btw: I seem not to be the only one with that issue - anyhow, the solution here (not displaying the Logo on mobile) is not acceptable for me.
      Thanks,
      Volker
       
    • Queue-it
      By Queue-it+
      Hi,
      I am using pl-section-journey and hiding most of the images. When running the page via google speed insights, it tells to optimize all the images that are in this plugins default. (e.g. https://queue-it.com/wp-content/plugins/pl-section-journey/images/drawer-5.jpg ) Like this one that is not visible on the website, but is a part of the plugin and comes up in google insights.
      I've deleted all the images in the plugin, but they still seem to come up. Ref. this page: queue-it.com/features
    • globalnative
      By globalnative+
      Hi there!
      I'm trying to create a featured image for my new blog post. It has text in it, and when I add it as a featured image some of the text is cut off on the right.
      Could I get the ideal dimensions for featured images? Or, a way to customise the dimensions so that they are easier to fit in the way I need?
      Thank you kindly
      Nate
       


×