<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML><HEAD> <title>Demo 1: DHTML modal dialog box</title> <link rel="stylesheet" href="css/demos.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; } /* 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; } </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="css/modal-message.css" type="text/css"> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript" src="js/modal-message.js"></script> <script type="text/javascript" src="js/ajax-dynamic-content.js"></script></head><body> <form> <div id="header"> <img src="/images/heading3.gif"> </div> <div id="mainContainer"> <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('includes/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><form name="form1" method="post" action=""> <label> <select name="select" id="select"> </select> </label></form><script type="text/javascript">messageObj = new DHTML_modalMessage(); // We only create one object of this classmessageObj.setShadowOffset(5); // Large shadowfunction 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></body></html>
If you don't mind hiding the select box form when you pop the window you could add this code:
<form name="form1" id="form1" method="post" action="">
<label>
<select name="select" id="select">
</select>
</label>
</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();
document.getElementById('form1').style.visibility = 'hidden';
}
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();
document.getElementById('form1').style.display = 'visible';
}
Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.
Hi.
As i was checking out the solutions the only way is to hide the select boxes or the forms where there are in.The dojotoolkit is hidding the selectboxes only in ie6 and in f.f it is working without problems.
Before i close the question please a little more help from sscotti:
How can i use the script i posted in FF and IE7.... and the solution you posted in IE6 with if...?
I have a little trouble testing in IE6. I have a Mac and use Parallels for Windows. However, it does work in IE6, IE7 in Parallels and in FF on the Mac for me. It is on my server at http://sscotti.com/modal-message/test.html if you want to try it there.
Hi sscotti.
I know.It is working for me too.As i said it is hiddind the form.
The last question was if i could use the code without the hidding function(the first code i posted in the question) when a client has FF or IE7 ,and the code you posted for client with IE 6.Is this possible?
Not sure I understand. If it works for all browsers why not just use it. If there is some other reason you could check the browser agent using javascript and conditionally execute the code to hide the select list if the browser agent is IE6.
Because i'm using these in a search form with many many select boxes it is not so good.It is like the half page in backround is disappearing.
So i prefer that what you said: conditionally execute the code to hide the select list if the browser agent is IE6.
If you want you can answer here or i have to make a new question.
<form name="form1" id="form1" method="post" action="">
<label>
<select name="select" id="select">
</select>
</label>
</form>
<script type="text/javascript">
messageObj = new DHTML_modalMessage(); // We only create one object of this class
messageObj.setShadowOffset
function displayMessage(url)
{
messageObj.setSource(url);
messageObj.setCssClassMess
messageObj.setSize(400,200
messageObj.setShadowDivVis
messageObj.display();
document.getElementById('f
}
function displayStaticMessage(messa
{
messageObj.setHtmlContent(
messageObj.setSize(300,150
messageObj.setCssClassMess
messageObj.setSource(false
messageObj.setShadowDivVis
messageObj.display();
}
function closeMessage()
{
messageObj.close();
document.getElementById('f
}