popup close button

[dotkpay]

Hello,

 

Am trying to position a png image on a jquery popup so that it will act as a close button.

The button should protrude out of the popup at the top right corner.

So how should I position this png image from the css layout file without having to include it in my html content.

Remember the main popup frame which is actually <div> has other child elements with content. So how do I make this button a direct child of the popup frame and not its other child elements.

 

Thanks in advance.

[BuildMyWeb]

this sounds like a javascript question more than a CSS one, no?

[Mahngiel]

http://jqueryui.com/demos/dialog/#modal-form

 

Click on theming tab:

<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a

 

Replace ui-icon-closethick with whatever you want from the themeroller

http://jqueryui.com/themeroller/

[Drongo_III]

Not sure if you solved this by now but it doesn't need to be very complicated.

 

 

Wrap your popup element in a new div. Give this div position:relative. This is so you can position your anchor tag (coming next).

 

Then create an anchor tag and style it as a block and set the background image to your png. Let's assume you apply a class to this element to acheive the styling. And lets assume the calss is 'closeButton'

 

Then you just need some simple jquqery

 

$(".closeButton").click(function(){

  $('#ID_of_popup_container').fadeOut('fast');

});

 

Hello,

 

Am trying to position a png image on a jquery popup so that it will act as a close button.

The button should protrude out of the popup at the top right corner.

So how should I position this png image from the css layout file without having to include it in my html content.

Remember the main popup frame which is actually <div> has other child elements with content. So how do I make this button a direct child of the popup frame and not its other child elements.

 

Thanks in advance.