Hi! I have successfully implemented a modal dialog using jquery with the help of Daniweb forum but I am facing one more problem.
Well, I have to intregrate it with a sharepoint page.
1. It is running fine in a normal web application.
2. It is running in a webpart.
3. But when I implement this in a sharepoint page without a webpart the Title Bar is not showing making it undraggable but with I try to resize the window it works o.k.
4. But when I refresh the page step 3 occurs again.
I have no idea why this is happening. I have used the following codes:
ASPX file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://7h5nk1s:11261/ecmaomexamples/Scripts/CSS_Files_/jquery.ui.all.css" />
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="http://7h5nk1s:11261/ecmaomexamples/Scripts/addaccount.js"></script>
<title>AddToList</title>
</head>
<body>
<form id="form1" runat="server">
<a href="#" id="addaccountlink">Add an account</a>
<a href="http://7h5nk1s:11261/ecmaomexamples/SitePages/testpage.aspx">Redirect</a>
<div id="addaccount" style="display: none; padding: 5px"></div>
</form>
</body>
</html>addaccount.js file
$(document).ready(function () {
$("#addaccount").load('http://7h5nk1s:11261/ecmaomexamples/SiteAssets/test2.html');
$("#addaccount").dialog({
height: 'auto',
width: 'auto',
modal: true,
autoOpen: false
});
$("#addaccountlink").click(function (e) {
$('#addaccount').dialog('open');
});
$(window).unload(function () { alert("Bye now!"); });
});Do I need to make any changes in the CSS files?
Please help!