Search code examples
javascripthtmlcssjquery-uiposition

How do I position my custom graphic in the upper right of my modal dialog?

I want to create a jQuery UI dialog box with my own close button, which will be a graphic. This is the HTML that will serve as the dialog

<div id="subscription_info">
    <div id="modalCloseButton"><img alt="Close" src="/assets/   close_button-914fbebcf02bf2f4aa98140b8e0415aeefc1c6f017f4ecfa5d48805c4c5523ae.png" width="20"></div>
    <div id="headerText"></div>
    <div class="subscription_data_row">
      Domain: mydomain.com 
    </div>
    <div class="subscription_data_row">
      Consumer Key: <span id="consumer_key"></span>
    </div>
    <div class="subscription_data_row">
      Consumer Secret: <span id="consumer_secret"></span>
    </div>
    <div><a href="#">Why do I do with this?</a></div>
</div>

and here’s the style:

#modalCloseButton {
    position: relative;
    top:10px;
    right:10px;
    cursor: pointer;
}

Although the image is missing, notice from the Fiddle — http://jsfiddle.net/gn26qos3/1/, the “Close” alt text is displaying int he center and I would like it to be in the upper right. How can I achieve this?

Solution

  • Just add text-align: right to the #modalCloseButton div and the image/alt text, will align to the right.

    http://jsfiddle.net/gn26qos3/2/