phpBB - adding JQuery UI Dialog to the forum

**akhileshbc** · Jun 8th, 2010, 08:59 AM

Hi...

I have a phpBB3 forum. I have set the user permission, so that guests will be able to see the Index page only.

What I want to do is, add a message window (just like the Lightbox one. eg: http://jqueryui.com/demos/dialog/modal.html ), and display a message to the guest (requesting user registration).

How can I do that ?

Thanks in advance....

**SambaNeko** · Jun 8th, 2010, 12:54 PM

If you want the modal window to appear automatically when the page loads, then you can pretty much just copy that example page. Make sure you include references to all necessary JS files, and then the relevant bits are:

Code:

<div id="dialog-modal" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

This is the content that will form the modal window. Edit the <div> contents to whatever you want.

Code:

$(function() {
  $("#dialog-modal").dialog({
    height: 140,
    modal: true
  });
});

And this is the jQuery that sets up the above <div> as a modal window. You can change the options such as "height", "modal", etc. - see the plugin's documentation for details.

If instead you want to trigger the modal window on a specific event, then the code remains the same, but must be placed inside of an appropriate event handler.

**akhileshbc** · Jun 8th, 2010, 09:20 PM

Thanks SambaNeko ....

Where should I post the <div> contents ? Just after the <body> tag ?

**akhileshbc** · Jun 8th, 2010, 10:07 PM

I have found that:. My current code is:

Code:

<html>
	<head>

		<meta charset="UTF-8" />
		<link type="text/css" href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
	
	
	<script type="text/javascript">
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$("#dialog").dialog("destroy");
	
		$("#dialog-message").dialog({
			modal: true,
			buttons: {
				Ok: function() {
					$(this).dialog('close');
				}
			}
		});
	});
	</script>

	</head>
<body>

<div class="demo">

<div id="dialog-message" title="Download complete">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		Your files have downloaded successfully into the My Downloads folder.
	</p>
	<p>
		Currently using <b>36% of your storage space</b>.
	</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
	<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
	<form>
		<input value="text input" /><br />
		<input type="checkbox" />checkbox<br />
		<input type="radio" />radio<br />
		<select>
			<option>select</option>
		</select><br /><br />
		<textarea>textarea</textarea><br />
	</form>
</div><!-- End sample page content -->

</div><!-- End demo -->

<div class="demo-description">

<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work.  Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>

</div><!-- End demo-description -->

</body>

</html>

But, the font size in the dialog is much larger. How can I reduce it ?

Here's the screenshot:

**akhileshbc** · Jun 8th, 2010, 10:25 PM

I have experimented with it and found this:

Code:

<div class="demo">

<div id="dialog-message" title="Download complete">
	<p style="font-size: 8pt;">
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		Your files have downloaded successfully into the My Downloads folder.
	</p>
	<p style="font-size: 8pt;">
		Currently using <b>36&#37; of your storage space</b>.
	</p>
</div>

That will reduce the font size of the message body. But the titlebar text and text in OK button isn't reduced !

How can I do that ?

Edit 1:
I think the problem is with the demo class. It is not defined in the css ! I will experiment that...

Edit 2:
I have edited three lines in jquery-ui-1.8.2.custom.css file. And now the font-size problem is solved.

Code:

/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/* Dialog
----------------------------------*/
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; font-size: 8pt; } /*....... ABC - Added fontsize ....... */
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; font-size: 8pt; } /*....... ABC - Added fontsize ....... */
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; font-size: 8pt; } /*....... ABC - Added fontsize ....... */
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

But the dialog window's size is the next problem !

Screenshot:

Thread: phpBB - adding JQuery UI Dialog to the forum

Thread Tools

Display

phpBB - adding JQuery UI Dialog to the forum

Re: phpBB - adding JQuery UI Dialog to the forum

Re: phpBB - adding JQuery UI Dialog to the forum

Re: phpBB - adding JQuery UI Dialog to the forum

Re: phpBB - adding JQuery UI Dialog to the forum

Posting Permissions