I was just working on something like this prior to the holiday. I have it
working it requires prototype.js & dom-drag.js.... heres my code, this is a
work in progress (read alpha), i'll blog the final version sometime in the
near future.
function disableWindow()
{
for(var i=0; i < document.getElementsByTagName('select').length;
i++)
{
Element.addClassName(document.getElementsByTagName('select')[i],
'invisibleSelect');
}
coverDiv = document.createElement('div');
coverDiv.id = 'window_disbled';
coverDiv.backgroundColor = 'lightgrey';
coverDiv.position = 'absolute';
coverDiv.left = 0;
coverDiv.top = 0;
coverDiv.width = '100%';
coverDiv.height = '100%';
coverDiv.margin = 0;
coverDiv.opacity = '.50';
coverDiv.filter = 'alpha(opacity=30)';
document.body.appendChild(coverDiv);
coverDiv.style.display='block';
coverDiv.style.width=document.body.scrollWidth;
//$(over).accessKey = 'l';
Form.disable(document.forms[0]);
Event.observe(window, 'resize', continueDisable, false);
Event.observe(document, 'keydown', enableWindow, false);
}
function continueDisable()
{
$('window_disbled').style.width=document.body.scrollWidth;
}
function enableWindow()
{
log.trace('Enabled');
Event.stopObserving(window, 'resize', continueDisable,
false);
Event.stopObserving(document, 'keydown', enableWindow, false);
$('window_disbled').parentNode.removeChild($('window_disbled'));
for(var i=0; i < document.getElementsByTagName('select').length;
i++)
{
Element.removeClassName(document.getElementsByTagName('select')[i],
'invisibleSelect');
}
log.trace('Removed OverDiv');
Form.enable(document.forms[0]);
}
custConfirm = function(msg,buttons,boxWidth)
{
var btnText = '';
var tempBtn = '';
disableWindow();
confirmBox = document.createElement('div');
confirmBox.id = 'confirmWindow';
document.body.appendChild(confirmBox);
confirmBox.style.position = "absolute"
confirmBox.style.width = boxWidth||250 +'px'
confirmBox.style.textAlign = "left"
confirmBox.style.fontFamily = "lucida console"
confirmBox.style.fontSize = "100%"
confirmBox.style.backgroundColor = 'darkgray'
confirmBox.style.opacity = 0.95;
confirmBox.style.filter = 'alpha(opacity=95)';
confirmBox.style.zIndex = 9999;
//drag element
var dragElement = document.createElement('div');
confirmBox.appendChild(dragElement);
dragElement.style.height="10px";
//this.dragElement.innerHTML=" ";
dragElement.style.backgroundImage =
"url(/includes/popup_handle.gif)";
dragElement.style.backgroundPosition = 'top center';
dragElement.style.backgroundRepeat = 'no-repeat';
LogDrag.init(dragElement,confirmBox);
var messageContainer = document.createElement('div');
messageContainer.style.textAlign = 'center';
messageContainer.style.marginTop = '10px';
messageContainer.appendChild(document.createTextNode(msg));
confirmBox.appendChild(messageContainer);
var btnContainer = document.createElement('div');
btnContainer.style.textAlign = 'center';
btnContainer.style.margin = '5px';
confirmBox.appendChild(btnContainer);
var msgBtn = document.createElement('button');
msgBtn.style.margin = '2px';
var btnWidth = 5;
for(btnText in buttons)
{
if(btnText != 'extend')
{
tempBtn = msgBtn.cloneNode(false);
tempBtn.value = btnText;
//tempBtn.appendChild(document.createTextNode(btnText));
Event.observe(tempBtn,'click',enableWindow);
Event.observe(tempBtn,'click',buttons[btnText]);
Event.observe(tempBtn,'click',removeConfirm);
btnContainer.appendChild(tempBtn);
if(btnWidth < tempBtn.offsetWidth)
{
btnWidth = tempBtn.offsetWidth;
}
}
}
for(var i = 0;
i<btnContainer.getElementsByTagName('button').length;
i++)
{
btnContainer.getElementsByTagName('button')[i].style.width =
btnWidth;
}
tempBtn = null;
confirmBox.style.left = (document.body.offsetWidth -
confirmBox.offsetWidth)/2;
confirmBox.style.top = (document.body.offsetHeight -
confirmBox.offsetHeight)/2;
};
function removeConfirm()
{
Element.remove('confirmWindow');//var confirmBox =
$('confirmWindow');
}
Thats it.
Quick documentiation call custComfirm("Message to user"
{"optionName":functionToRun , "option2name":functionToRunForOption2})
Example:
<button onclick="custConfirm('Is this
working',{'yes':runnthis,'no':runnThat})">confirm</button>
<script>
function runthis(){alert("running this");}
function runThat(){alert("running That");}
-----Original Message-----
> From: Andy Mcshane
> To: CF-Talk
> Sent: 11/01/2006 10:01
> Subject: Re: Custome Message Box?
>
> Forgot to mention that this pop-up only appears as the result of an
> 'onClick' event.
>
> > Not sure if I have posted this to the correct forum, so I apologise if
>
> > I have not.
> >
> > The problem that I have is that I need to be able to display a
> > customised pop-up message box on one of my CF pages. I have looked at
> > Javscript (not enough options), VBScript (cannot change the default
> > button text) and I am now thinking whether CSS is what I need.
> >
> > I need to be able to provide the user with a pop-up that gives the
> > following options 'Edit', 'Delete' & 'cancel'. The user cannot
> > navigate from the page until an option is chosen so we are talking
> > modal also. Can anyone make any suggestions on the best way to achieve
>
> > this, if at all
> possible?
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:229151
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
