如何在模态对话框的右上角放置自定义图形?

时间:2017-01-01 17:47:10

标签: javascript html css jquery-ui position

我想创建一个带有我自己的关闭按钮的jQuery UI对话框,它将是一个图形。这是将用作对话框的HTML

<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>

这是风格:

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

虽然缺少图像,但是从小提琴 - http://jsfiddle.net/gn26qos3/1/注意到,“关闭”替代文字显示在中心,我希望它在右上角。我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:0)

只需将text-align: right添加到#modalCloseButton div,图片/ alt文本就会向右对齐。

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