Canvas Support

Need a modal form on a button click

2 replies·opened Mar 16, 2020
S
swevenservicesMar 16, 2020

I went through the documentation and I only could find there the code to load modal on page load. I'm looking to show modal on a button click event. Also I want to control that how big the modal should be as we do in bootstrap.

Hope you'd get my problem. Also it will be a lot easier if you could send me the code here. Thanks.

S
SemiColonWebSTAFFMar 16, 2020

Hello,

  1. It is definitely possible to Trigger the Lightbox using a Button, simply use the data-lightbox="inline" function. An example is already provided in the lightbox.html Template. Code:
<a href="#myModal1" data-lightbox="inline" class="btn btn-secondary btn-lg">Trigger Modal</a>

Simply change the href="#myModal1" Value according to your Modal's ID.

  1. If you use the following code as an example for the Modal:
<div class="modal1 mfp-hide" id="myModal1">
&#x9;<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
&#x9;&#x9;<div class="feature-box fbox-center fbox-effect nobottomborder nobottommargin" style="padding: 40px;">
&#x9;&#x9;&#x9;<div class="fbox-icon">
&#x9;&#x9;&#x9;&#x9;<a href="#"><i class="icon-screen i-alt"></i></a>
&#x9;&#x9;&#x9;</div>
&#x9;&#x9;&#x9;<h3>Responsive Layout<span class="subtitle">Adapts well on Devices</span></h3>
&#x9;&#x9;</div>
&#x9;&#x9;<div class="section center nomargin" style="padding: 30px;">
&#x9;&#x9;&#x9;<a href="#" class="button" onClick="$.magnificPopup.close();return false;">Don&apos;t Show me Again</a>
&#x9;&#x9;</div>
&#x9;</div>
</div>

Simply change the max-width: 500px; Value and this will make your Modal Wider.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

S
swevenservicesMar 17, 2020

Thank you so much, it worked perfectly fine

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard