POP up DIV

[marvi 0]

Olá pessoal, vejam essas divs: http://www.dhtmlgoodies.com/scripts/modal-...al-message.html

 

Alguém sabe como fazer como esse exemplo? Perceba que ao abrir o POP UP com essa div a página atrás fica bloqueada...

 

Agora esssas divs deve ser carregada com Onload, pois aí carrega com onclick, eu digo isso que achei uma vez que o onload não carregava...

 

Obrigado!

 

Marcelo

[Daniel-DF 0]

Crie os arquivos abaixo e coloque todos na mesma pasta, o arquivo demo-modal-message-1.inc é o responsável pela exibição da div/popup:

 

modal-message.js

conteúdo:

/********************************************************************************

****************************

* DHTML modal dialog box

*

* Created: August, 26th, 2006

* @class Purpose of class: Display a modal dialog box on the screen.

*

* Css files used by this script: modal-message.css

*

* Demos of this class: demo-modal-message-1.html

*

* Update log:

*

********************************************************************************

****************************/

 

 

/**

* @constructor

*/

 

DHTML_modalMessage = function()

{

var url; // url of modal message

var htmlOfModalMessage; // html of modal message

 

var divs_transparentDiv; // Transparent div covering page content

var divs_content; // Modal message div.

var iframe; // Iframe used in ie

var layoutCss; // Name of css file;

var width; // Width of message box

var height; // Height of message box

 

var existingBodyOverFlowStyle; // Existing body overflow css

var dynContentObj; // Reference to dynamic content object

var cssClassOfMessageBox; // Alternative css class of message box - in case you want a different appearance on one of them

var shadowDivVisible; // Shadow div visible ?

var shadowOffset; // X and Y offset of shadow(pixels from content box)

var MSIE;

 

this.url = ''; // Default url is blank

this.htmlOfModalMessage = ''; // Default message is blank

this.layoutCss = 'modal-message.css'; // Default CSS file

this.height = 200; // Default height of modal message

this.width = 400; // Default width of modal message

this.cssClassOfMessageBox = false; // Default alternative css class for the message box

this.shadowDivVisible = true; // Shadow div is visible by default

this.shadowOffset = 5; // Default shadow offset.

this.MSIE = false;

if(navigator.userAgent.indexOf('MSIE')>=0) this.MSIE = true;

 

 

}

 

DHTML_modalMessage.prototype = {

// {{{ setSource(urlOfSource)

/**

* Set source of the modal dialog box

*

*

* @public

*/

setSource : function(urlOfSource)

{

this.url = urlOfSource;

 

}

// }}}

,

// {{{ setHtmlContent(newHtmlContent)

/**

* Setting static HTML content for the modal dialog box.

*

* @param String newHtmlContent = Static HTML content of box

*

* @public

*/

setHtmlContent : function(newHtmlContent)

{

this.htmlOfModalMessage = newHtmlContent;

 

}

// }}}

,

// {{{ setSize(width,height)

/**

* Set the size of the modal dialog box

*

* @param int width = width of box

* @param int height = height of box

*

* @public

*/

setSize : function(width,height)

{

if(width)this.width = width;

if(height)this.height = height;

}

// }}}

,

// {{{ setCssClassMessageBox(newCssClass)

/**

* Assign the message box to a new css class.(in case you wants a different appearance on one of them)

*

* @param String newCssClass = Name of new css class (Pass false if you want to change back to default)

*

* @public

*/

setCssClassMessageBox : function(newCssClass)

{

this.cssClassOfMessageBox = newCssClass;

if(this.divs_content){

if(this.cssClassOfMessageBox)

this.divs_content.className=this.cssClassOfMessageBox;

else

this.divs_content.className='modalDialog_contentDiv';

}

 

}

// }}}

,

// {{{ setShadowOffset(newShadowOffset)

/**

* Specify the size of shadow

*

* @param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)

*

* @public

*/

setShadowOffset : function(newShadowOffset)

{

this.shadowOffset = newShadowOffset

 

}

// }}}

,

// {{{ display()

/**

* Display the modal dialog box

*

*

* @public

*/

display : function()

 

 

{

if(!this.divs_transparentDiv){

this.__createDivs();

}

 

// Redisplaying divs

this.divs_transparentDiv.style.display='block';

this.divs_content.style.display='block';

this.divs_shadow.style.display='block';

if(this.MSIE)this.iframe.style.display='block';

this.__resizeDivs();

 

/* Call the __resizeDivs method twice in case the css file has changed. The first execution of this method may not catch these changes */

window.refToThisModalBoxObj = this;

setTimeout('window.refToThisModalBoxObj.__resizeDivs()',150);

 

this.__insertContent(); // Calling method which inserts content into the message div.

}

// }}}

,

// {{{ ()

/**

* Display the modal dialog box

*

*

* @public

*/

setShadowDivVisible : function(visible)

{

this.shadowDivVisible = visible;

}

// }}}

,

// {{{ close()

/**

* Close the modal dialog box

*

*

* @public

*/

close : function()

{

//document.documentElement.style.overflow = ''; // Setting the CSS overflow attribute of the <html> tag back to default.

 

/* Hiding divs */

this.divs_transparentDiv.style.display='none';

this.divs_content.style.display='none';

this.divs_shadow.style.display='none';

if(this.MSIE)this.iframe.style.display='none';

 

}

// }}}

,

// {{{ __addEvent()

/**

* Add event

*

*

* @private

*/

addEvent : function(whichObject,eventType,functionName,suffix)

{

if(!suffix)suffix = '';

if(whichObject.attachEvent){

whichObject['e'+eventType+functionName+suffix] = functionName;

whichObject[eventType+functionName+suffix] = function(){whichObject['e'+eventType+functionName+suffix]( window.event );}

whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName+suffix] );

} else

whichObject.addEventListener(eventType,functionName,false);

}

// }}}

,

// {{{ __createDivs()

/**

* Create the divs for the modal dialog box

*

*

* @private

*/

__createDivs : function()

{

// Creating transparent div

this.divs_transparentDiv = document.createElement('DIV');

this.divs_transparentDiv.className='modalDialog_transparentDivs';

this.divs_transparentDiv.style.left = '0px';

this.divs_transparentDiv.style.top = '0px';

 

document.body.appendChild(this.divs_transparentDiv);

// Creating content div

this.divs_content = document.createElement('DIV');

this.divs_content.className = 'modalDialog_contentDiv';

this.divs_content.id = 'DHTMLSuite_modalBox_contentDiv';

this.divs_content.style.zIndex = 100000;

 

if(this.MSIE){

this.iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');

this.iframe.style.zIndex = 90000;

this.iframe.style.position = 'absolute';

document.body.appendChild(this.iframe);

}

 

document.body.appendChild(this.divs_content);

// Creating shadow div

this.divs_shadow = document.createElement('DIV');

this.divs_shadow.className = 'modalDialog_contentDiv_shadow';

this.divs_shadow.style.zIndex = 95000;

document.body.appendChild(this.divs_shadow);

window.refToModMessage = this;

this.addEvent(window,'scroll',function(e){ window.refToModMessage.__repositionTransparentDiv() });

this.addEvent(window,'resize',function(e){ window.refToModMessage.__repositionTransparentDiv() });

 

 

}

// }}}

,

// {{{ __getBrowserSize()

/**

* Get browser size

*

*

* @private

*/

__getBrowserSize : function()

{

var bodyWidth = document.documentElement.clientWidth;

var bodyHeight = document.documentElement.clientHeight;

 

var bodyWidth, bodyHeight;

if (self.innerHeight){ // all except Explorer

 

bodyWidth = self.innerWidth;

bodyHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) {

// Explorer 6 Strict Mode

bodyWidth = document.documentElement.clientWidth;

bodyHeight = document.documentElement.clientHeight;

} else if (document.body) {// other Explorers

bodyWidth = document.body.clientWidth;

bodyHeight = document.body.clientHeight;

}

return [bodyWidth,bodyHeight];

 

}

// }}}

,

// {{{ __resizeDivs()

/**

* Resize the message divs

*

*

* @private

*/

__resizeDivs : function()

{

 

var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);

 

if(this.cssClassOfMessageBox)

this.divs_content.className=this.cssClassOfMessageBox;

else

this.divs_content.className='modalDialog_contentDiv';

 

if(!this.divs_transparentDiv)return;

 

// Preserve scroll position

var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);

var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);

 

window.scrollTo(sl,st);

setTimeout('window.scrollTo(' + sl + ',' + st + ');',10);

 

this.__repositionTransparentDiv();

 

 

var brSize = this.__getBrowserSize();

var bodyWidth = brSize[0];

var bodyHeight = brSize[1];

 

// Setting width and height of content div

this.divs_content.style.width = this.width + 'px';

this.divs_content.style.height= this.height + 'px';

 

// Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)

var tmpWidth = this.divs_content.offsetWidth;

var tmpHeight = this.divs_content.offsetHeight;

 

 

// Setting width and height of left transparent div

 

 

 

 

 

 

this.divs_content.style.left = Math.ceil((bodyWidth - tmpWidth) / 2) + 'px';;

this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) + topOffset) + 'px';

 

if(this.MSIE){

this.iframe.style.left = this.divs_content.style.left;

this.iframe.style.top = this.divs_content.style.top;

this.iframe.style.width = this.divs_content.style.width;

this.iframe.style.height = this.divs_content.style.height;

}

 

this.divs_shadow.style.left = (this.divs_content.style.left.replace('px','')/1 + this.shadowOffset) + 'px';

this.divs_shadow.style.top = (this.divs_content.style.top.replace('px','')/1 + this.shadowOffset) + 'px';

this.divs_shadow.style.height = tmpHeight + 'px';

this.divs_shadow.style.width = tmpWidth + 'px';

 

 

 

if(!this.shadowDivVisible)this.divs_shadow.style.display='none'; // Hiding shadow if it has been disabled

 

 

}

// }}}

,

// {{{ __insertContent()

/**

* Insert content into the content div

*

*

* @private

*/

__repositionTransparentDiv : function()

{

this.divs_transparentDiv.style.top = Math.max(document.body.scrollTop,document.documentElement.scrollTop) + 'px';

this.divs_transparentDiv.style.left = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft) + 'px';

var brSize = this.__getBrowserSize();

var bodyWidth = brSize[0];

var bodyHeight = brSize[1];

this.divs_transparentDiv.style.width = bodyWidth + 'px';

this.divs_transparentDiv.style.height = bodyHeight + 'px';

 

}

// }}}

,

// {{{ __insertContent()

/**

* Insert content into the content div

*

*

* @private

*/

__insertContent : function()

{

if(this.url){ // url specified - load content dynamically

ajax_loadContent('DHTMLSuite_modalBox_contentDiv',this.url);

}else{ // no url set, put static content inside the message box

this.divs_content.innerHTML = this.htmlOfModalMessage;

}

}

}

 

 

ajax.js

conteúdo:

/* Simple AJAX Code-Kit (SACK) v1.6.1 */

/* ©2005 Gregory Wild-Smith */

/* www.twilightuniverse.com */

/* Software licenced under a modified X11 licence,

see documentation or authors website for more details */

 

function sack(file) {

this.xmlhttp = null;

 

this.resetData = function() {

this.method = "POST";

this.queryStringSeparator = "?";

this.argumentSeparator = "&";

this.URLString = "";

this.encodeURIString = true;

this.execute = false;

this.element = null;

this.elementObj = null;

this.requestFile = file;

this.vars = new Object();

this.responseStatus = new Array(2);

};

 

this.resetFunctions = function() {

this.onLoading = function() { };

this.onLoaded = function() { };

this.onInteractive = function() { };

this.onCompletion = function() { };

this.onError = function() { };

this.onFail = function() { };

};

 

this.reset = function() {

this.resetFunctions();

this.resetData();

};

 

this.createAJAX = function() {

try {

this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

try {

this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

this.xmlhttp = null;

}

}

 

if (! this.xmlhttp) {

if (typeof XMLHttpRequest != "undefined") {

this.xmlhttp = new XMLHttpRequest();

} else {

this.failed = true;

}

}

};

 

this.setVar = function(name, value){

this.vars[name] = Array(value, false);

};

 

this.encVar = function(name, value, returnvars) {

if (true == returnvars) {

return Array(encodeURIComponent(name), encodeURIComponent(value));

} else {

this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);

}

}

 

this.processURLString = function(string, encode) {

encoded = encodeURIComponent(this.argumentSeparator);

regexp = new RegExp(this.argumentSeparator + "|" + encoded);

varArray = string.split(regexp);

for (i = 0; i < varArray.length; i++){

urlVars = varArray.split("=");

if (true == encode){

this.encVar(urlVars[0], urlVars[1]);

} else {

this.setVar(urlVars[0], urlVars[1]);

}

}

}

 

this.createURLString = function(urlstring) {

if (this.encodeURIString && this.URLString.length) {

this.processURLString(this.URLString, true);

}

 

if (urlstring) {

if (this.URLString.length) {

this.URLString += this.argumentSeparator + urlstring;

} else {

this.URLString = urlstring;

}

}

 

// prevents caching of URLString

this.setVar("rndval", new Date().getTime());

 

urlstringtemp = new Array();

for (key in this.vars) {

if (false == this.vars[key][1] && true == this.encodeURIString) {

encoded = this.encVar(key, this.vars[key][0], true);

delete this.vars[key];

this.vars[encoded[0]] = Array(encoded[1], true);

key = encoded[0];

}

 

urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];

}

if (urlstring){

this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);

} else {

this.URLString += urlstringtemp.join(this.argumentSeparator);

}

}

 

this.runResponse = function() {

eval(this.response);

}

 

this.runAJAX = function(urlstring) {

if (this.failed) {

this.onFail();

} else {

this.createURLString(urlstring);

if (this.element) {

this.elementObj = document.getElementById(this.element);

}

if (this.xmlhttp) {

var self = this;

if (this.method == "GET") {

totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;

this.xmlhttp.open(this.method, totalurlstring, true);

} else {

this.xmlhttp.open(this.method, this.requestFile, true);

try {

this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

} catch (e) { }

}

 

this.xmlhttp.onreadystatechange = function() {

switch (self.xmlhttp.readyState) {

case 1:

self.onLoading();

break;

case 2:

self.onLoaded();

break;

 

case 3:

self.onInteractive();

break;

case 4:

self.response = self.xmlhttp.responseText;

self.responseXML = self.xmlhttp.responseXML;

self.responseStatus[0] = self.xmlhttp.status;

self.responseStatus[1] = self.xmlhttp.statusText;

 

if (self.execute) {

self.runResponse();

}

 

if (self.elementObj) {

elemNodeName = self.elementObj.nodeName;

elemNodeName.toLowerCase();

if (elemNodeName == "input"

|| elemNodeName == "select"

|| elemNodeName == "option"

|| elemNodeName == "textarea") {

self.elementObj.value = self.response;

} else {

self.elementObj.innerHTML = self.response;

}

}

if (self.responseStatus[0] == "200") {

self.onCompletion();

} else {

self.onError();

}

 

self.URLString = "";

break;

}

};

 

this.xmlhttp.send(this.URLString);

}

}

};

 

this.reset();

this.createAJAX();

}

 

 

ajax-dynamic-content.js

conteúdo:

/********************************************************************************

****************************

Ajax dynamic content

Copyright © 2006 DTHMLGoodies.com, Alf Magne Kalleland

 

This library is free software; you can redistribute it and/or

modify it under the terms of the GNU Lesser General Public

License as published by the Free Software Foundation; either

version 2.1 of the License, or (at your option) any later version.

 

This library is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU

Lesser General Public License for more details.

 

You should have received a copy of the GNU Lesser General Public

License along with this library; if not, write to the Free Software

Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

 

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script

written by Alf Magne Kalleland.

 

Alf Magne Kalleland, 2006

Owner of DHTMLgoodies.com

 

 

********************************************************************************

****************************/

 

var enableCache = true;

var jsCache = new Array();

 

var dynamicContent_ajaxObjects = new Array();

 

function ajax_showContent(divId,ajaxIndex,url)

{

var targetObj = document.getElementById(divId);

targetObj.innerHTML = dynamicContent_ajaxObjects[ajaxIndex].response;

if(enableCache){

jsCache = dynamicContent_ajaxObjects[ajaxIndex].response;

}

dynamicContent_ajaxObjects[ajaxIndex] = false;

 

ajax_parseJs(targetObj)

}

 

function ajax_loadContent(divId,url)

{

if(enableCache && jsCache){

document.getElementById(divId).innerHTML = jsCache;

return;

}

 

var ajaxIndex = dynamicContent_ajaxObjects.length;

document.getElementById(divId).innerHTML = 'Loading content - please wait';

dynamicContent_ajaxObjects[ajaxIndex] = new sack();

dynamicContent_ajaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get

dynamicContent_ajaxObjects[ajaxIndex].onCompletion = function(){ ajax_showContent(divId,ajaxIndex,url); }; // Specify function that will be executed after file has been found

dynamicContent_ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function

 

 

}

 

function ajax_parseJs(obj)

{

var scriptTags = obj.getElementsByTagName('SCRIPT');

var string = '';

var jsCode = '';

for(var no=0;no<scriptTags.length;no++){

if(scriptTags[no].src){

var head = document.getElementsByTagName("head")[0];

var scriptObj = document.createElement("script");

 

scriptObj.setAttribute("type", "text/javascript");

scriptObj.setAttribute("src", scriptTags[no].src);

}else{

if(navigator.userAgent.indexOf('Opera')>=0){

jsCode = jsCode + scriptTags[no].text + '\n';

}

else

jsCode = jsCode + scriptTags[no].innerHTML;

}

 

}

 

if(jsCode)ajax_installScript(jsCode);

}

 

 

function ajax_installScript(script)

{

if (!script)

return;

if (window.execScript){

window.execScript(script)

}else if(window.jQuery && jQuery.browser.safari){ // safari detection in jQuery

window.setTimeout(script,0);

}else{

window.setTimeout( script, 0 );

}

}

 

 

demo-modal-message-1.inc

conteúdo:

<html><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><form name="myForm">

<table border="0">

<tbody><tr>

<td colspan="2"><img src="demo-modal-message-1_arquivos/heading3.gif"></td>

</tr>

<tr>

<td><label for="firstname">Firstname:</label></td>

<td><input name="firstname" id="firstname" type="text"></td>

</tr>

<tr>

<td><label for="lastname">Lastname:</label></td>

<td><input name="lastname" id="lastname" type="text"></td>

</tr>

<tr>

<td></td>

<td><input value="Close" onclick="closeMessage()" type="button">

<input value="Send" onclick="closeMessage()" type="button"></td>

</tr>

</tbody></table>

<script type="text/javascript">

document.myForm.firstname.focus();

</script>

</form></body></html>

 

demo.css

conteúdo:

/*

General CSS for the demos of DHTMLSuite

*/

body{

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;

font-size:0.8em;

margin:0px;

}

 

a{

color:red;

text-decoration:underline;

}

 

modal-message.css

conteúdo:

/********************************************************************************

****************************

* DHTML modal dialog box (CSS for the DHTMLSuite_modalMessage class)

*

* Created: August, 26th, 2006

* @class Purpose of class: Display a modal dialog box on the screen.

*

* Css files used by this script: modal-message.css

*

* Update log:

*

********************************************************************************

****************************/

 

.modalDialog_transparentDivs{

filter:alpha(opacity=40); /* Transparency */

opacity:0.4; /* Transparency */

background-color:#AAA;

z-index:1;

position:absolute; /* Always needed */

}

.modalDialog_contentDiv{

border:3px solid #000;

padding:2px;

z-index:100;/* Always needed */

position:absolute; /* Always needed */

background-color:#FFF; /* White background color for the message */

}

.modalDialog_contentDiv_shadow{

z-index:90;/* Always needed - to make it appear below the message */

position:absolute; /* Always needed */

background-color:#555;

filter:alpha(opacity=30); /* Transparency */

opacity:0.3; /* Transparency */

}

 

 

home.html

conteúdo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<title>Demo 1: DHTML modal dialog box</title>

 

<script src="urchin.js" type="text/javascript">

</script>

<script type="text/javascript">

// _uacct = "UA-85864-2";

_uacct = "UA-2042963-1";

urchinTracker();

</script>

 

<link rel="stylesheet" href="demo.css" media="screen" type="text/css">

<style type="text/css">

/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */

#mainContainer{

width:500px;

margin:0 auto;

margin-top:10px;

border:1px double #000;

padding:5px;

text-align:left;

 

}

body{

text-align:center;

}

 

/* Alternative layout for the message box - used by one of the messages */

 

.modalDialog_contentDiv_error{

border:3px solid #FFF;

padding:2px;

z-index:100;/* Always needed */

position:absolute; /* Always needed */

background-color:#F00; /* White background color for the message */

color:#FFF;

}

.modalDialog_contentDiv_error a{

color:#FFF;

}

h1{

margin-top:0px;

}

#header{

width:730px;

margin:0 auto;

text-align:left;

}

div{

text-align:left;

}

img{

border:0px;

}

</style>

<script type="text/javascript">

function verify(ver){

 

if(ver){

// Confirmed message, i.e. clicked on "Yes"

alert('Message confirmed');

}else{

// Clicked on "No"

alert('Message not confirmed');

}

}

</script>

<link rel="stylesheet" href="modal-message.css" type="text/css">

 

<script type="text/javascript" src="ajax.js"></script>

<script type="text/javascript" src="modal-message.js"></script>

<script type="text/javascript" src="ajax-dynamic-content.js"></script>

</head>

<body>

 

<form>

<div id="header">

 

</div>

<div id="mainContainer">

 

<a href="/index.html"><img src="/images/heading3.gif"></a>

<p>This is a demo of the DHTML_modalMessage class. It displays a message at the center of the screen and disables all other page controls until the message is closed.</p>

<a href="#" onclick="displayMessage('demo-modal-message-1.inc');return false">Message from url (example 1)</a><br>

<a href="#" onclick="displayMessage('includes/demo-modal-message-2.inc');return false">Message from url (example 2)</a><br>

<a href="#" onclick="displayMessage('includes/demo-modal-message-3.inc');return false">Alternative confirm dialog (example 3)</a><br>

<p>The content of the two boxes above are loaded from external files. We have also specified that we want a drop shadow on them</p>

<a href="#" onclick="displayStaticMessage('<h1>Static message</h1><p>This is a static message</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>',false);return false">Static message (Example 1)</a><br>

 

<a href="#" onclick="displayStaticMessage('<h1>Error message</h1><p>This is a static message with a different layout(css class)</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>','modalDialog_contentDiv_error');return false">Static message (Example 2 - different layout)</a>

<p>These last boxes are displaying static HTML. There are no shadows on these boxes. The last message box is assigned to a different CSS class than

the other messages. This gives it a different look.</p>

<div class="clear"></div>

</div>

</form>

<script type="text/javascript">

messageObj = new DHTML_modalMessage(); // We only create one object of this class

messageObj.setShadowOffset(5); // Large shadow

 

 

function displayMessage(url)

{

 

messageObj.setSource(url);

messageObj.setCssClassMessageBox(false);

messageObj.setSize(400,200);

messageObj.setShadowDivVisible(true); // Enable shadow for these boxes

messageObj.display();

}

 

function displayStaticMessage(messageContent,cssClass)

{

messageObj.setHtmlContent(messageContent);

messageObj.setSize(300,150);

messageObj.setCssClassMessageBox(cssClass);

messageObj.setSource(false); // no html source since we want to use a static message here.

messageObj.setShadowDivVisible(false); // Disable shadow for these boxes

messageObj.display();

 

 

}

 

function closeMessage()

{

messageObj.close();

}

 

 

</script>

<script type="text/javascript"><!--

shoppingads_ad_client = "e9ba700655a69e85a9e8";

shoppingads_ad_campaign = "default";

shoppingads_ad_width = "728";

shoppingads_ad_height = "90";

shoppingads_ad_kw = "DHTML,Javascript,Software,Computer,Ajax";

shoppingads_color_border = "FFFFFF";

shoppingads_color_bg = "FFFFFF";

shoppingads_color_heading = "00A0E2";

shoppingads_color_text = "000000";

shoppingads_color_link = "008000";

shoppingads_new_ad = "false";

--></script>

<script type="text/javascript" src="show_sa_ads.js">

</script>

 

<!-- Kontera ContentLink? -->

<script LANGUAGE="JavaScript">

var dc_UnitID = 14;

var dc_PublisherID = 3695;

var dc_AdLinkColor = 'blue';

var dc_adprod='ADL';

</SCRIPT>

<script LANGUAGE="JavaScript" SRC="KonaLibInline.js"></SCRIPT>

<!-- Kontera ContentLink? --></body>

</html>

 

 

 

OSB: OS CÓDIGOS SÃO OS ORIGINAIS DO DESENVOLVEDOR. DÊ UMA LIMPEZA NO CÓDIGO (home.html), pois tem muito script que não terá ultilidade.

APENAS O EXEMPLO 1 ESTÁ FUNCIONANDO, MAS JA DÁ PRA TER UMA IDÉIS DO RESTANTE.

 

 

 

 

abraços

[marvi 0]

Certo, eu vou fazer e qualquer coisa eu te aviso!

 

Mas ele carregada com Onload no body? Pois eu encontrei um que carrrega com onlick e não deixa com onload... quero com onload!

 

Obrigado!

[Daniel-DF 0]

JÁ TESTEi E FUNCIONA COM ONLOAD.

 

<body onload="displayMessage('demo-modal-message-1.inc');return false">

 

 

 

Abraço