Author: tyrell
Date: Mon Jan 14 23:37:47 2008
New Revision: 12237
Log:
Adding background masking to make our dialog a model dialog.
Added:
trunk/mashup/java/modules/www/images/maskBG.png (contents, props changed)
Modified:
trunk/mashup/java/modules/www/css/mashup-main.css
trunk/mashup/java/modules/www/js/mashup-utils.js
Modified: trunk/mashup/java/modules/www/css/mashup-main.css
==============================================================================
--- trunk/mashup/java/modules/www/css/mashup-main.css (original)
+++ trunk/mashup/java/modules/www/css/mashup-main.css Mon Jan 14 23:37:47 2008
@@ -14,7 +14,6 @@
* limitations under the License.
*/
-
/*From WSAS Main*/
div#alertMessageBox {
@@ -96,41 +95,64 @@
/* End Edit box Styles */
-
pre {
white-space: -moz-pre-wrap !important; /* Mozilla */
word-wrap: break-word; /* IE 5.5+ */
}
-.diaLogTitle{
- font-family: Arial, Helvetica, sans-serif;
- font-size:10pt;
- color:#FFFFFF;
- font-weight:bold;
- background-image:url(../images/w_top_bg.gif);
+.diaLogTitle {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 10pt;
+ color: #FFFFFF;
+ font-weight: bold;
+ background-image: url( ../images/w_top_bg.gif );
}
-#d_Body{
- border-right-width: 2px;
- border-bottom-width: 2px;
- border-left-width: 1px;
- border-right-style: solid;
- border-bottom-style: solid;
- border-left-style: solid;
- border-right-color: #96A64B;
- border-bottom-color: #96A64B;
- border-left-color: #96A64B;
- padding: 5px;
- background-color: #E7F3AF;
-}
-
-#lyrDialog
- {
- position: absolute;
- left: 50%;
- margin-left: -115px;
- width: 230px;
- height: 25px;
- padding: 12px;
- }
+#d_Body {
+ border-right-width: 2px;
+ border-bottom-width: 2px;
+ border-left-width: 1px;
+ border-right-style: solid;
+ border-bottom-style: solid;
+ border-left-style: solid;
+ border-right-color: #96A64B;
+ border-bottom-color: #96A64B;
+ border-left-color: #96A64B;
+ padding: 5px;
+ background-color: #E7F3AF;
+}
+
+#lyrDialog {
+ position: absolute;
+ left: 50%;
+ margin-left: -115px;
+ width: 230px;
+ height: 25px;
+ padding: 12px;
+}
+
+#dialogMask {
+ position: absolute;
+ z-index: 200;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ opacity: .4;
+ filter: alpha( opacity = 40 );
+ /* this hack is so it works in IE
+ * I find setting the color in the css gives me more flexibility
+ * than the PNG solution.
+ */
+ background-color: transparent !important;
+ background-color: #333333;
+ /* this hack is for opera support
+ * you can uncomment the background-image if you don't care about opera.
+ * this gives you the flexibility to use any bg color that you want,
instead of the png
+ */
+ background-image /**/: url( "../images/maskBG.png" ) !important;
+/ / For browsers Moz, Opera, etc . background-image : none;
+ background-repeat: repeat;
+ display: none;
+}
\ No newline at end of file
Added: trunk/mashup/java/modules/www/images/maskBG.png
==============================================================================
Binary file. No diff available.
Modified: trunk/mashup/java/modules/www/js/mashup-utils.js
==============================================================================
--- trunk/mashup/java/modules/www/js/mashup-utils.js (original)
+++ trunk/mashup/java/modules/www/js/mashup-utils.js Mon Jan 14 23:37:47 2008
@@ -622,15 +622,23 @@
WSO2.MashupUtils.dialog = function(strTitle, strBody, width, height) {
if (document.getElementById('lyrDialog') == null) {
+ var pageBody = document.getElementsByTagName('BODY')[0];
var x = (document.body.clientWidth - width) / 2;
var y = (document.body.clientHeight - height) / 2;
x = (x > 0) ? x : 0;
y = (y > 0) ? y : 0;
- document.body.innerHTML +=
- '<div id="lyrDialog" style="position: absolute; left:' + x + 'px;
top:' + y +
- 'px; width:' + width + 'px; z-index:1">' +
+ //Creating the dialog div
+ var dialogContent = document.createElement('div');
+ dialogContent.id = "lyrDialog";
+ dialogContent.style.position = 'absolute';
+ dialogContent.style.left = x + 'px';
+ dialogContent.style.top = y + 'px';
+ dialogContent.style.width = width + 'px';
+ dialogContent.style.zIndex = 300;
+
+ dialogContent.innerHTML +=
'<table width="100%" border="0" height="' + height +
'" cellspacing="0" cellpadding="0">' +
'<tr height="24">' +
@@ -646,9 +654,16 @@
'<tr>' +
'<td id="d_Body" height="100%" valign="top">' + strBody + '</td>' +
'</tr>' +
+ '</table>';
+
+ //Creating the mask div
+ var dialogMask = document.createElement('div');
+ dialogMask.id = 'dialogMask';
- '</table>' +
- '</div>';
+ pageBody.appendChild(dialogMask);
+ dialogMask.style.display = "block";
+
+ pageBody.appendChild(dialogContent);
} else {
document.getElementById('lyrDialog').style.display = "block";
@@ -656,6 +671,7 @@
};
WSO2.MashupUtils.dialog.close = function() {
+ //Cleaning up the dom
document.getElementById('lyrDialog').parentNode.removeChild(document.getElementById('lyrDialog'));
-
+
document.getElementById('dialogMask').parentNode.removeChild(document.getElementById('dialogMask'));
}
\ No newline at end of file
_______________________________________________
Mashup-dev mailing list
[email protected]
http://www.wso2.org/cgi-bin/mailman/listinfo/mashup-dev
