Page 1 of 1
Modal dialog
Posted: Tue May 29, 2018 8:16 pm
by borz00
Hi,
Is there a way to get the modal dialog as seen when clicking About in the WonderCMS website's menu?
Thanks!
Re: Modal dialog
Posted: Fri Jun 01, 2018 7:16 am
by HWU
Modal Box *
without* using Bootstrap? Good idea.
Sample:
http://www.webpin.ch/wonder/#openModal
It's only a small playground...
Tutorial for this quick and dirty solution:
https://www.webdesignerdepot.com/2012/1 ... -and-css3/
Re: Modal dialog
Posted: Sat Jun 02, 2018 2:19 pm
by wiz
Hi borz00.
This is done using a simple trick. Instructions below:
1. First, make sure there is an "about" page already
created and
hidden from menu.
2. In your theme.php, insert this code (
insert the code just below the <footer></footer> tags):
Code: Select all
<div id="aboutModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content darkerTransparentBackground">
<div class="modal-header noBorder">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<?php echo wCMS::get('pages', 'about')->content; ?>
</div>
<div class="modal-footer noBorder">
<button type="button" class="btn btn-info transparentBackground" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
3. Replace the original menu
Code: Select all
<div class="collapse navbar-collapse" id="menu-collapse">
<ul class="nav navbar-nav navbar-right">
<?=wCMS::menu()?>
</ul>
</div>
with
Code: Select all
<div class="collapse navbar-collapse" id="menu-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="cursorPointer" data-toggle="modal" data-target="#aboutModal" title="About">
About
</a>
</li>
<?=wCMS::menu()?>
</ul>
</div>
4. Save your theme.php.
5. In your style.css, add these two lines
(anywhere, in their own lines)
Code: Select all
.cursorPointer {cursor: pointer;}
.noBorder {border: 0 !important;}
6. Now you have the same about modal pop-up as wondercms.com does.
Let me know if you need any help.