Hi! I am a developer. I am using jquery to create a modal dialog.
I am using the following code snippets. Please tell what is going wrong:

<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.7.custom.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.1.4.js"></script>
<script type="text/javascript" src="jquery-ui.min.1.8.js"></script>
<script type="text/javascript" src="jquery.min.1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui.min.1.7.2.js"></script>
$(document).ready(function () {
        $("#addaccount").dialog({
        height: 'auto',
        width: 'auto',
        modal: true,
        autoOpen: false
    });
    $("#addaccountlink").click(function (e) {
        $('#addaccount').dialog('open');
    });
});

Please help!

Recommended Answers

You have 3 jquery scripts and 2 jquery-ui scripts included. You just need one of each, preferably the latest version.

You should show your HTML too.

Jump to Post

Start by removing line 7, 11 and 12.

I pasted your code here, and appears to be working: http://jsbin.com/omigu4/edit

Jump to Post

Is your UI folder incomplete perhaps ?

Jump to Post

The least you need next to the CSS is the images folder that belongs with it.

Jump to Post

All 13 Replies

You have 3 jquery scripts and 2 jquery-ui scripts included. You just need one of each, preferably the latest version.

You should show your HTML too.

Perhaps I should show my full implementation. The following code is an aspx code with the js files in the Scripts:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="ModalDialogDemoNew._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Scripts/jquery.js"></script>
<link href="Scripts/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Scripts/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/addaccount.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <a href="#" id="addaccountlink">Add an account</a>
    <a href="Scripts/testNew.html">Redirect</a>
    <div id="addaccount" style="display: none; padding: 5px"></div>
    </form>
</body>
</html>

Please suggest something!

I made the changes but the cross icon is not coming.

Can you suggesst which UI files I need to make it work correctly.

The least you need next to the CSS is the images folder that belongs with it.

The code works fine when the js files are referenced from internet.
But when I download them in pc and reference locally they don't work properly.
This is the scenario in my case.

Download a theme and put the images folder where the css is.

Does it work if you use the remote scripts, as on the jsbin link ?

I did that also it is still not working.
Actually I have to open a web page in side a div tag.
When the dialog is opening automatically, it is working perfectly but when I am opening by using

$("#divid").dialog('open');

it is malfunctioning. What is the probable reason?

You are right. I downloaded a new theme and implemented the modal dialog and it is working perfectly.
Can you do me one more favour.
How can I enable the help or "?" icon in the modal dialog.
Thanks in advance.
Have a nice day.

OK. I will do that. Many many thanks for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.