Modal dialog

[borz00]

Hi,

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

Thanks!

[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/

[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.