javascript - jQuery 对话框 : How do I alter the close tag style?

Question

我有一个 jQuery 对话框，我看了一圈，但找不到任何东西来设置自动包含在其中的关闭标记的样式。我已经阅读了下载的文档，可以在这里找到: http://jqueryui.com/demos/dialog/ (导航到选项选项卡)

老实说，这并没有多大帮助，我只是想知道是否有人可以阐明我遇到的问题。例如，如果您查看此对话框: http://jqueryui.com/demos/dialog/

我想让我的使用小十字，但我的只是在左上角显示“关闭”这个词，无论我在 CSS 中做了什么改变，我都无法让它做什么我想要，为了引用，我将把我的代码放在下面:

HTML:

 <div id="column1">
     <h2>
     Features</h2>
         <p>Click an image below to view more information on our products.</p>
         <a href="#" id="x-button"><img src="../Images/lockIcon.png" alt="Security"/></a>
              <div id="dialog" style="display:none;">
                   <p class="innerTitle">This is content!</p>
              </div>
 </div>

jQuery

 <script type="text/javascript">
                 $(document).ready(function(){

                     // Initialize my dialog
                     $("#dialog").dialog({
                        autoOpen: false,
                        modal: true,
                        width: 450
                    }
                    );

                    // Bind to the click event for my button and execute my function
                    $("#x-button").click(function(){
                        Foo.DoSomething();
                    });


                    var Foo = {
                        DoSomething: function(){
                            $("#dialog").dialog("open");
                        }
                    }
                });
                </script>

CSS

 /* -------------------- ADDITIONAL -------------------- */

 #dialog 
 {
 width: 550px;
 height: 550px;
 background-color: #c8c8c8;
 background-image: url("../Images/orangeDivider.png");
 background-repeat:  repeat-x;
 background-position: top left;
 } 

 .innerTitle
 {
 padding-top: 10px;
 font-size: 14px;
 font-weight: bold;
 color: #808080;
 }

再次感谢大家!

Answer 1

听起来您没有包含默认的 jQuery UI CSS。

您应该包含一个名称类似于 jquery-ui-1.8.11.custom.css 的 CSS 文件。

在该 CSS 文件所在的文件夹中还应该有一个 images 文件夹。