Printable View
Hi...:wave:
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....:wave:
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:
This is the content that will form the modal window. Edit the <div> contents to whatever you want.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>
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.Code:$(function() {
$("#dialog-modal").dialog({
height: 140,
modal: true
});
});
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.
Thanks SambaNeko ....:wave:
Where should I post the <div> contents ? Just after the <body> tag ?
I have found that:. My current code is:
But, the font size in the dialog is much larger. How can I reduce it ? :confused: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>
Here's the screenshot:
http://i660.photobucket.com/albums/u...dialogcopy.png
I have experimented with it and found this:
That will reduce the font size of the message body. But the titlebar text and text in OK button isn't reduced !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% of your storage space</b>.
</p>
</div>
How can I do that ? :confused:
Edit 1:
I think the problem is with the demo class. It is not defined in the css ! I will experiment that...:wave:
Edit 2:
I have edited three lines in jquery-ui-1.8.2.custom.css file. And now the font-size problem is solved.
But the dialog window's size is the next problem !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; }
Screenshot:
http://i660.photobucket.com/albums/u...tsizeissue.png