Close button in modals
One way is to create closing element dynamically before opening modal (using beforeOpen" option):
m = new Control.Modal($('my_link'),{beforeOpen: function(){ var closeLink = document.createElement('a'); closeLink.href = '#'; closeLink.title = 'Close window'; closeLink.className = 'closeLink'; /* the following line inserts 'x' into link and can be skipped if you want to style it with background image */ closeLink.appendChild(document.createTextNode('x')); // add event handler to close modal on click closeLink.observe('click', function(e){ m.close(); Event.stop(e); }) $('modal_container').appendChild(closeLink); },
})
Then style it with CSS
#modal_container{ position: relative;}
.closeLink {position: absolute; top: 0; right: 0;
}
I didn't check this code but am pretty it will work : )
Posted April 25th, 2007 at 10:44pm by kangax
Hi kangax and thanks for the help.
Unfortunally I could not get it to work, all that happens is that Control.Modal breaks and open all links the regular way. I can't program in javascript so it's highly likely I have used your code in the wrong way...
This is how I put your code in: Event.observe(window,'load',function(){ new Control.Modal($('modal_1'),{ iframe: true, iframeTemplate: new Template(''), width: 820, height: 540 beforeOpen: function(){ var closeLink = document.createElement('a'); closeLink.href = '#'; closeLink.title = 'Close window'; closeLink.className = 'closeLink'; /* the following line inserts 'x' into link and can be skipped if you want to style it with background image */ closeLink.appendChild(document.createTextNode('x')); // add event handler to close modal on click closeLink.observe('click', function(e){ m.close(); Event.stop(e); }) $('modal_container').appendChild(closeLink); } }); new Control.Modal($('modal_2'),{ iframe: true, iframeTemplate: new Template(''), width: 820, height: 540 }); new Control.Modal($('modal_3'),{ iframe: true, iframeTemplate: new Template(''), width: 820, height: 540 }); new Control.Modal($('modal_4')); new Control.Modal($('modal_5')); new Control.Modal($('modal_6')); });
Posted April 26th, 2007 at 8:38am by davidr
Hi,
I am using Control.Modal on a web site to show images and flash videos. The flash videos are loaded using a iframe in Control.Modal.
The thing is that I would like to add a close button to all modals for usability reasons, so users know how to close them. I have noticed that not everyone understands that they should click the overlay.
So, how can I add a extra div tag in the top of a modal which can have a close button/link? Another option is to place a small close icon [X] on the overlay above the right top corner of the modal.
Any help is appriciated!
Posted April 25th, 2007 at 2:45am by davidr