Question

I’ve got a jQuery dialog box, and I’ve had a look round but I can’t find anything to style the close tag thats included within it automatically. I’ve read the documentation included in the downloaded, which can be found here:
http://jqueryui.com/demos/dialog/ (navigate to the options tab)

Thats not really helping much in all honesty, and I was just wondering if anyone could shed some light on the problem i’m having. For example, if you view this dialog box:
http://jqueryui.com/demos/dialog/

I’d like mine to use the little cross to, but instead mine just displays the word “close” in the top left corner and no matter what alterations I make in the CSS, I can’t get it to do what I want, for reference I will put my code below:

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

Thanks again people!

Answer 1

It sounds like you’re not including the default jQuery UI CSS.

You should be including a CSS file named similarly to jquery-ui-1.8.11.custom.css.

There should also be an images folder in the same folder as that CSS file.