DHTML Modal Hide Drag Bar

[JustBittin]

1) Script Title:
DHTML Modal
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm
3) Describe problem:
This script is absolutely one of the best modal scripts I have seen, but there is one thing that is very important, and this would also solve a few of the other questions I've searched and seen. I am wondering if someone could help me disable the top bar (drag bar) completely.

,dragbar=1, or ,dragbar=0 (example variable, default to 1 - on) - My reason isn't to disable the drag, but a few others have wanted this - my reason is to pop-up messages that require an answer, without the ability to close, minimize, or move the dialog box.

I am more than willing to donate alittle money to dynamic drive for this addition, or to someone else for that matter :)

Thanks in advance,
Chris

[jscheuer1]

In the stylesheet, just add (highlighted):


.drag-handle{ /*CSS for Drag Handle*/
padding: 1px;
text-indent: 3px;
font: bold 14px Arial;
background-color: #CA0000;
color: white;
cursor: move;
overflow: hidden;
width: auto;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
display:none;
}

[JustBittin]

This I understand :) - I think I wasn't clear - I use the modal box for other things to, different about us sections, terms, etc.. so I don't ALWAYS want the drag-bar disabled, just on call for certain boxes... on the same page the drag-bar may or may not need to be visible... this is my dilemma...

Thanks again...
Chris

[jscheuer1]

That can be done as well using the css style. Each modal has a unique id configured for it when it is setup (example from the source code of the demo page):


<script type="text/javascript">

var agreewin=dhtmlmodal.open("agreebox", "iframe", "modalfiles/agreement.htm", "This Page's Terms of service", "width=590px,height=450px,center=1,resize=1,scrolling=0", "recal")

agreewin.onclose=function(){ //Define custom code to run when window is closed
var theform=this.contentDoc.getElementById("eula") //Access form with id="eula" inside iframe
var yesbox=theform.eulabox[0] //Access the first radio button within form
var nobox=theform.eulabox[1] //Access the second radio button within form
if (yesbox.checked==true)
alert("You agreed to the terms")
else if (nobox.checked==true)
alert("You didn't agree to the terms")
return true //Allow closing of window in both cases
}

</script>

So, if you only want to remove that particular modal's dragbar, add this to your stylesheet:


#agreebox .drag-handle {
display:none;
}

It will only knock out the one for that modal.

[JustBittin]

Such a simple way - :) Sometimes as a programmer we forget the easy ways... it's crazy, I was in the middle of writing a javascript function to change the class display property.

Man, did I tell you that your my hero today :)

Thanks greatly, worked perfect.

Chris