Modal Plug-In?

Hey all,

Anyone have a good modal plug-in that they use for a Concrete site? I’m looking for an overlay when the page loads for advertising a special offer on a website.

Help appreciated

I have used this and it is very good.

Cool - Thanks. I’ll give it a try. :slightly_smiling_face:

@juddc you can call the bootstrap modal in the html block, but also in any text block that allows you to insert code - completely free of charge :wink:

<div class="container mt-3">
<h3>Modal Example</h3>

<p>Click on the button to open the modal.</p>
<button class="btn btn-primary" data-bs-target="#myModal" data-bs-toggle="modal" type="button">Open modal</button></div>
<!-- The Modal -->

<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content"><!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading as h4</h4>
<button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
<!-- Modal body -->

<div class="modal-body">Modal body.. there is a div where you can fit a lot... iconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</div>
<!-- Modal footer -->

<div class="modal-footer"><button class="btn btn-primary" data-bs-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>
1 Like

Oh - Interesting. I didn’t know you could do that. Is there anything special I need to do in order to get it working? I plugged in your code and it didn’t launch the modal window - just showed the text and the Close button below the block above it.

That’s interesting - this is the code from a text block (I even pasted it with the text in English to make sure it was ok) - it should work
With this code, you should get 2 states.
First.


maybe diferent colors

After a click Second one

Maybe something went wrong with the code - write me a private message and I will send it to you again.

1 Like

No - I didn’t get that at all. Do I need to do something to call bootstrap in the page_theme.php or something?

This is what I get:

no, just put the code


C9.2.1 php 8.x

That’s exactly what I did. It doesn’t work over here. V9.1.3 - PHP 8+

I think I know where the problem is / you probably don’t use Bootstrap 5 in your theme - I see the same behavior as yours on Elemental theme (and this is Twitter Bootstrap) - probably different naming will fix it - check the Twitter Bootstrap documentation.