Modal dialog

Welcome to the WonderCMS community. Anything goes, except for support requests.
Post Reply
borz00
Posts: 1
Joined: Tue May 29, 2018 8:10 pm

Modal dialog

Post by borz00 »

Hi,

Is there a way to get the modal dialog as seen when clicking About in the WonderCMS website's menu?

Thanks!
HWU
Posts: 17
Joined: Tue Dec 26, 2017 5:46 pm

Re: Modal dialog

Post by HWU »

Modal Box *without* using Bootstrap? Good idea. :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/
User avatar
wiz
Admin
Posts: 700
Joined: Sat Oct 30, 2010 12:23 am

Re: Modal dialog

Post 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.
Post Reply