how to use jquery UI dialog

Question

I'm wondering everything I need to do have just a basic jquery dialog appear on the screen. Here is my code below. Any help why none of the UI properties are being rendered when executing the code below? All that happens currently is if a user clicks on "show dialog" then plain html text then appears, without any UI css or actual dialog box. I have included jquery UI scripts that I downloaded from http://jqueryui.com/download but perhaps I didn't download and use the correct UI scripts? Thanks!

Master page code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/UI/css/ui-lightness/jquery-ui-1.8.17.custom.css"     type="text/javascript"></script>
<script src="Scripts/UI/js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
  <form runat="server">
<div class="page">
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
</div>
</form>
</body>
</html>

Default Page:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
<script src="Scripts/textboxclone.js" type="text/javascript"></script>
<script src="Scripts/fadeOut.js" type="text/javascript"></script>
<script src="Scripts/flip.js" type="text/javascript"></script>
<script src="Scripts/dialog.js" type="text/javascript"></script>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">     
<a id='showDialog' href="#">Show Dialog</a>
<div id="dialog1" style="display:none;">
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</div>
</asp:Content>

FishBasketGordo · Accepted Answer · 2012-01-30 21:19:55Z

6

You have to include the jQuery CSS file as a CSS file. Use

<link rel="Stylesheet" 
      href="Scripts/UI/css/ui-lightness/jquery-ui-1.8.17.custom.css" />

instead of

<script src="Scripts/UI/css/ui-lightness/jquery-ui-1.8.17.custom.css" 
        type="text/javascript"></script>

answered Jan 30, 2012 at 21:19

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jre247 Over a year ago

This solved my problem! All I had to do was modify that exact code you mentioned above for Jquery CSS file as a CSS file. Thanks!!

Collectives™ on Stack Overflow

how to use jquery UI dialog

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related