diff options
| author | MatthewM <mcm@they-got.us> | 2012-12-17 14:32:28 -0500 |
|---|---|---|
| committer | MatthewM <mcm@they-got.us> | 2012-12-17 14:32:28 -0500 |
| commit | f33f7d98c4d38aabb9f9c54c7880249262e767a4 (patch) | |
| tree | eec25f848b546ce8d5d378893cddabb4a6161953 /modules/extra/webcpanel/templates/default | |
| parent | 6b5f583ff36b7719e6358b92a9a35c59090a3011 (diff) | |
Added a modal window interface to MemoServs page that will automaticly fade out after a give time (currently 5s)
Diffstat (limited to 'modules/extra/webcpanel/templates/default')
3 files changed, 78 insertions, 1 deletions
diff --git a/modules/extra/webcpanel/templates/default/header.html b/modules/extra/webcpanel/templates/default/header.html index 38f367acc..c16799259 100644 --- a/modules/extra/webcpanel/templates/default/header.html +++ b/modules/extra/webcpanel/templates/default/header.html @@ -3,8 +3,16 @@ <head> <link href="/static/style.css" media="screen" rel="stylesheet" type="text/css" /> <title>{TITLE}</title> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> + <script type="text/javascript"> + var t=5000; // Time in ms to display an overlay if one will be displayed + </script> </head> <body> + <div id="boxes"> + <div id="dialog" class="window"></div> + <div id="mask"></div> + </div> <div class="master"> <div class="header"> <ul id="button"> diff --git a/modules/extra/webcpanel/templates/default/memoserv/memos.html b/modules/extra/webcpanel/templates/default/memoserv/memos.html index 559efd35b..c5c6b2fdd 100644 --- a/modules/extra/webcpanel/templates/default/memoserv/memos.html +++ b/modules/extra/webcpanel/templates/default/memoserv/memos.html @@ -1,7 +1,50 @@ {INCLUDE header.html} + {IF EXISTS CMDR} + <script type="text/javascript"> + $(document).ready(function() \{ + var id = "#dialog"; + + showModal(); + setInterval('hideModal()', t); + + $('.close').click(function (e) \{ + e.preventDefault(); + hideModal(); + \}); + + $('#mask').click(function () \{ + hideModal(); + \}); + + function hideModal() \{ + $('.content').fadeIn(200); + $('#mask, .window').fadeOut(200); + \} + + function showModal() \{ + var mHeight = $(document).height(); + var mWidth = $(window).width(); + + $('#mask').css(\{'width': mWidth, 'height': mHeight\}); + $('#mask').fadeIn(200); + $('#mask').fadeTo('fast',0.8); + + $(id).html('<br/><br/>{CMDR} <br/><a href="#" class="close">Close</a>'); + var top = mHeight/2-$(id).height()/2; + var left= mWidth/2-$(id).width()/2; + + $(id).css('top', top); + $(id).css('left', left); + $(id).fadeIn(500); + $('.content').fadeOut(200); + \} + + \}); + </script> + {END IF} <b>Channels you have access in:</b><br/> {FOR CH,ECH IN CHANNEL_NAMES,ESCAPED_CHANNEL_NAMES} - <a href="/memoserv/memos?channel={ECH}">{CH}</a> + <a href="/memoserv/memos?channel={ECH}" class="channel">{CH}</a> {END FOR} <br/><br/> {FOR M IN MESSAGES} diff --git a/modules/extra/webcpanel/templates/default/style.css b/modules/extra/webcpanel/templates/default/style.css index 65715faca..4341d568e 100644 --- a/modules/extra/webcpanel/templates/default/style.css +++ b/modules/extra/webcpanel/templates/default/style.css @@ -3,6 +3,7 @@ font-family: 'Cabin', Helvetica, Arial, sans-serif; }
body {
overflow:hidden;
+ z-index: 10;
}
.master {
margin-left:0px;
@@ -123,3 +124,28 @@ body { color: red;
weight: bolder;
}
+
+/* Modal Window */
+#mask {
+ position: aboslute;
+ z-index: 9000;
+ background-color: #000;
+ height: 100%;
+ width: 100%;
+ display: none;
+}
+
+#boxes .window {
+ position:fixed;
+ width:440px;
+ height:200px;
+ display:none;
+ z-index:9999;
+ padding:20px;
+}
+
+ #boxes #dialog {
+ background-color: #FFF;
+ width:375px;
+ height:203px;
+}
|