Dashboard | Scripts & Tutorials

This tutorial gives an insight into creating a modal popup box manually. The base style is fully customisable.

1. To begin open Control Panel > Design customisation > CSS.

2. Then paste the following code at the very top after entering 1/2 lines down.

Code

/*Feedback Box*/

.feedbackmform {padding:15px; background-color:#F5F5DC; border-radius:5px;}
.form {border-radius:5px; border:#000000 8px solid; position:fixed; width:350px; left: 50%; display:none; margin: 0 0 0 -175px; top:100px; box-shadow: 2px 2px 2px #888888;; z-index:9999; background-color:#FFFFFF; padding:10px;}
.feedback {border-top-right-radius:3px; border-top-left-radius:3px; padding:5px; font-size:16px; position:fixed; right:5px; bottom:0px; background-color:#99FF33; font-weight:bold; border-left:#0099FF 1px solid; border-right:#0099FF 1px solid; border-top:#0099FF 1px solid;}
.feedback:hover {cursor:pointer; background-color:#0099FF; color:#FFFFFF;}
a.feedbacklink {color:blue;}
.formclose {float:right; opacity:0.6;}
.formclose:hover {opacity:1; cursor:pointer;}
.formtitle {font-size:22px; font-weight:bold;}
#fade {display:none; background:#000000; position:fixed; left:0; top:0; width:100%; height:100%; opacity:.8; z-index:9000;}

3. Save and close the template.

4. Open Control Panel > Design customisation > Top part of the website.

5. Paste the following code at the very top after entering a few lines.

Code

<div id="fade"></div>
<script type="text/javascript">
  $(document).ready(function(){
  $("#feedbackrelease").click(function(){
  $("#feedbackform").fadeIn();
  $(".feedback").fadeOut();
  $("#fade").fadeIn();
  });
  });
  </script>

<script type="text/javascript">
  $(document).ready(function(){
  $("#feedbackclose").click(function(){
  $("#feedbackform").fadeOut();
  $(".feedback").fadeIn();
  $("#fade").fadeOut();
  });
  });
</script>

<div class="form" id="feedbackform"><img src="http://updates.ucoz.com/resources/close.png" align="right" id="feedbackclose" class="formclose"><span class="formtitle">%TITLE%</span><p></p>%CONTENT%</div>
<div class="feedback" id="feedbackrelease">%BTITLE%</div>

6. Customise the %TITLE%, %CONTENT% and %BTITLE% tags.

7. Save and close the template.

Note: If you wish to change the colours used for the release button please leave a comment and I (Paradox) will make up a button for you with those colours. Any further questions about this script would be asked in the right forum section.

Paradox

5.0

19/04/2024

Comments display order:

3 AlexWains • 5:22:34, 12/08/2012

oh ok

2 Paradox • 11:23:38, 11/08/2012

AlexWains, my apologies, the image was relocated as part of a management update. I have now updated the code accordingly and the file will remain where it is.

As to the feedback form it isn't possible for me to create one for you. If you need specific help however feel free to ask on the forums and I will do my best to assist.

1 AlexWains • 9:05:13, 09/08/2012

Hmm I have to say something..... I can't Fine Close Button in it ....So can you Update the Code Perfectly ??........... and can you create a Feedback Form for me??

My Account

You are currently not logged in.

So what are you waiting for?
To get started log in or sign up to Dashboard Support to make use of all our cool site features.

Online Chat

[admin] Paradox: Please log in to take part in online chatter.

Food For Thought

Opinions Wanted!