Member Avatar for soft_coder

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="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<title>AddToList</title>
</head>

<body>

<form id="form1" runat="server">
<a href="#" id="addaccountlink">Add an account</a>
<a href="">Redirect</a>
<div id="addaccount" style="display: none; padding: 5px"></div>
</form>

</body>

</html>

file

$(document).ready(function () {
    $("#addaccount").load('');
    $("#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!

  • 1 Contributor
  • 1 Reply
  • 678 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by soft_coder

Dani AI

Generated

Note: later reported the issue was fixed. The symptom described — a dialog that opens but has no visible title bar (and is only draggable after a resize) — is almost always a page/CSS or load-order problem rather than a bug in jQuery UI itself. Given the follow-up, the most likely causes were CSS overrides, a container clipping the dialog, or initialization happening before the final page styles/layout were applied.

Quick checklist and practical fixes:

  • Inspect the DOM: confirm a .ui-dialog-titlebar element exists. If it exists but is invisible, a CSS rule (SharePoint core CSS or a theme) is overriding height, display, color, or background.

  • Avoid clipping by parent containers: dialogs that are rendered inside an element with overflow:hidden or position:relative can have the title bar cut off. Force the dialog into the page root with appendTo: "body" (or into the SharePoint workspace container).

    $("#addaccount").dialog({
  appendTo: "body",
  zIndex: 10000
});

  • Check load order and duplicates: ensure exactly one copy of jQuery is loaded, jQuery UI scripts run after jQuery, and draggable/resizable modules are present before dialog() is called.

  • SharePoint timing: initialize the dialog after the SharePoint page has finished building (use _spBodyOnLoadFunctionNames.push("initDialog") or the SharePoint SOD API) so styling/layout are stable.

    _spBodyOnLoadFunctionNames.push("initDialog");
function initDialog() {
  // dialog init here
}

  • Use developer tools to check computed styles (height, display, z-index) for .ui-dialog and .ui-dialog-titlebar. If SharePoint CSS is overriding important properties, add a narrow, specific override (avoid blanket !important rules).

These targeted checks (DOM presence, CSS overrides, appendTo/overflow, load timing, z-index) explain the "works after resize" behavior and will prevent recurrence on SharePoint pages.

Member Avatar for soft_coder

Some page issues were there. It is now working fine.

Be a part of the DaniWeb community

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