add modal or popup link to a themeler button

Hello David,
opening pop up window or modal window usually requires some JS coding. I believe that you may create a button or link in Themler but add custom code that opens a pop up/modal in the CMS back end.

Regards,
Aileen

so with html then, thanks.

Hi David,
you're welcome.
Please let us know if you need any further help.

Regards,
Aileen

Hello,
I tried to add a modal window in my onepage template but it appear and disapear and doesn't stay on screen.
here is the link :
http://tipi-com.com/J3/#fonctionalites

is there another way to have a modal window because it is a regular item with twitter bootstrap and save a lot of space on a webpage.

Thanks

Eric

Hello Eric,
although it is a pure coding task we'll try to help you.
Please provide more information:
1.what link should open a modal window on your page?
2.link to the article/post where you got the modal window code sample.

regards,
Aileen

Hi,
please refer to my response for topic
http://answers.themler.com/questions/29056/bootstrap-modal-link-does-not-work-the-way-it-should

regards,
Aileen

The link is dead.
Ay hints on how to create a button with a modal window?

Hi Marco,

This topic was moved to Private.

The native bootstrap Modal feature works ok with Themler themes:
http://getbootstrap.com/javascript/#modals
You can add HTML control and insert the appropriate code inside. To use Themler default button simply use the following link:
<a class="bd-button" data-toggle="modal" data-target="#myModal"> Launch demo modal </a>

Thank you,
Olivia

i need to open a external website in this modal. how to do?

Hi,

You can put the iframe inside "modal-body".

Thank you,
Olivia

Your code does nothing. Code from Bootstrap example open modal:

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

And other their examples open modal. But position:fixed in overlay .modal-backdrop is making it not possible to click anywhere. Dont know why it is so.

It is the same problem on Cloud, default theme. Just tested. Go to your Bootstrap link and click on demos, you wont experience this problem.

Adding this helps, but no overlay anymore.

data-backdrop="false"

Seems as they fixed it in 3.3.5 version. Just update your code in Themler default shiping to latest.

http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Seems as they fixed it in 3.3.5 version. Just update your code in Themler default shiping to latest.

http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Hi, as I had the same problem here is the code I put in a html. If you have many modals windows to open watch out the ID otherwise you will open the same modal . Inside modal-body I call another article with "article anywhere" so it's where you can put your iframe.
see the attached file.

Last edited 16 October 2015 by contact130

Hi,

I've tested bootstrap modal on my side side before suggest anything. And this feature works ok on my side. Just do not open it in Themler. Themler Preview has its own peculiarities (layers with selection frames, etc.). If you need to see how it works simply make Live preview.

And other their examples open modal. But position:fixed in overlay .modal-backdrop is making it not possible to click anywhere. Dont know why it is so.

So, if overlay layer (.modal-backdrop) overlaps the whole page including modal window it's no good it needs to checked separately.

The only issue I see is the color of this layer.
You can fix this issue manually by adding the following code to the Themler Settings >> Additional CSS:

.modal-backdrop.in
{
opacity: 0.5!important;
}

Thank you,
Olivia

Olivia:

• Open default WP theme on Cloud.
• Insert HTML Control
• Insert HTML code inside (from Bootstrap examples, your code doesnt work)
• Go to the frontpage where modal is.

• Click on button to open modal.

• Modal opens but all is not clickable anymore. You cannot click anymore.

• Do the same on Botstrap official website where examples are. Modal is clickable, beside modal, on close, etc...

Ok.

I can click all buttons and click outside modal window to close it.

Here is the code I'm using:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
     </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

What am I doing differently?

Thank you,
Olivia

I see now what you are doing. Works this way on homepage.

Open Post template and insert same HTML Control under date, user, edit. Above Post image.
And you will se problem.

Aha! That's what you mean.
The issue happens when modal is located in content.
I've found this thread:
https://github.com/twbs/bootstrap/issues/16148
and this (resolves the issue above):
https://github.com/twbs/bootstrap/pull/16432

Looks like the fix is planned on bootstrap 4.
At least changing bootstrap version is not working for me.
The problem is that modal parent should have specified positioning and z-index to make everything work properly.

Anyway, the best solution that I found is to add the modal itself somewhere outside content (before footer, for example).

Thank you,
Olivia