From 368ada44db571c46deea674eadd410ac9bc47ebc Mon Sep 17 00:00:00 2001 From: Zaran Date: Fri, 13 May 2011 14:19:26 +0200 Subject: Simple dialog plugin. Test dialog when clicking register link. --- webclient/index.html | 11 +++++++- webclient/lib/alias.js | 6 ++++ webclient/lib/jquery.dialog.js | 63 ++++++++++++++++++++++++++++++++++++++++++ webclient/style/dialog.css | 15 ++++++++++ 4 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 webclient/lib/jquery.dialog.js create mode 100644 webclient/style/dialog.css diff --git a/webclient/index.html b/webclient/index.html index 745c4ff..018514e 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -9,6 +9,7 @@ + @@ -16,10 +17,16 @@ + +
+
+
test
+
+
- +

Contacts

diff --git a/webclient/lib/alias.js b/webclient/lib/alias.js index 521b492..f5945d7 100644 --- a/webclient/lib/alias.js +++ b/webclient/lib/alias.js @@ -388,6 +388,12 @@ $(document).ready(function(){ $(this).val(''); } }); + + $('#dialogs').dialog(); + + $('#register-link').click(function(){ + $('#dialogs').dialog('show', 'register'); + }); }); diff --git a/webclient/lib/jquery.dialog.js b/webclient/lib/jquery.dialog.js new file mode 100644 index 0000000..1a5679e --- /dev/null +++ b/webclient/lib/jquery.dialog.js @@ -0,0 +1,63 @@ +/** + * jQuery dialog plugin + * + *
+ *
+ *
+ *
+ *
+ */ +(function( $ ){ + + var methods = { + + init: function(){ + this.data('dialog', {opened: []}); + this.find('#dialog-overlay').bind('click.dialog', function(){ + $(this).parent().dialog('hide'); + }); + }, + + show: function(name){ + var maskHeight = $(document).height(); + var maskWidth = $(window).width(); + var overlay = this.find('#dialog-overlay'); + overlay.css({'width':maskWidth,'height':maskHeight}); + var winH = $(window).height(); + var winW = $(window).width(); + var dialog = this.find('#'+name); + dialog.css('top', winH/2-dialog.height()/2); + dialog.css('left', winW/2-dialog.width()/2); + this.data('dialog').opened.push(name); + overlay.show(); + dialog.show(); + }, + + hide: function(){ + var name = this.data('dialog').opened.pop(); + var dialog = this.find('#'+name); + var overlay = this.find('#dialog-overlay'); + dialog.hide(); + if (this.data('dialog').opened.length === 0){ + overlay.hide(); + } + } + }; + + /* + * Register the 'dialog' method to the jQuery objects + * the first argument of this method is the submethod + * you want to call + */ + $.fn.dialog = function(method) { + if ( methods[method] ) { + return methods[method].apply(this, Array.prototype.slice + .call(arguments, 1)); + } else if ( typeof method === 'object' || !method ) { + return methods.init.apply(this, arguments); + } else { + $.error('Method ' + method + ' does not exist on jQuery.dialog'); + } + }; + +})(jQuery); \ No newline at end of file diff --git a/webclient/style/dialog.css b/webclient/style/dialog.css new file mode 100644 index 0000000..ea9266e --- /dev/null +++ b/webclient/style/dialog.css @@ -0,0 +1,15 @@ +#dialog-overlay{ + position:absolute; + z-index:9000; + background-color:#575757; + opacity: 0.7; + display:none; +} + +#dialogs .dialog{ + position:absolute; + display:none; + z-index:9999; + padding:5px; + background-color: red; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2