Click here to Skip to main content
13,043,491 members (51,738 online)
Rate this:
Please Sign up or sign in to vote.
My code is as follows :

<html xmlns="">
<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.17.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('<div id="dialogDiv">' + 'This is a dialog.' + '</div>').appendTo('body');
                resizable: false,
                height: 140,
                modal: true,
                autoOpen: false,
            $('#btnLoad').click(function () {
                return false;
    <form id="form1" runat="server">
            <asp:Button ID="btnLoad" Text="Load" runat="server" />

I want my dialog to be modal so that I can not click on "Load" button again till my dialog is closed. But with my above code i can still click on "Load" button.

I am using JQuery ui 1.8.17. Can anyone please tell me where I am going wrong? Also there are scroll bars appearing even though my content is just a sentence. how do I hide only horizontal scroll bar?
Posted 13-Jul-13 8:42am
ryanb31 13-Jul-13 22:08pm
Where is dialogDiv?
Not clear. jQuery UI Dialog plug-in already implements modal behavior. Are you sure that your button is really outside of this dialog?
Pratik Gaikwad 17-Jul-13 14:34pm
yes SA. It is out side of this dialog.can you please ignore this question and reply on to my new question?
Sergey Alexandrovich Kryukov 17-Jul-13 14:55pm
Which is..?
Pratik Gaikwad 17-Jul-13 14:56pm
I need this code to be IE7 compatible...
Pratik Gaikwad 18-Jul-13 13:57pm
Hi SA... no reply to new question? here is the link again...

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Found a solution after reading documentation of J-Query-UI. The solution is that we need to modify below class as per our need :

.ui-widget-overlay {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            background: #aaaaaa ;/*important line to know that the class is in effect*/
            opacity: .3;
            filter: Alpha(Opacity=30) /*{opacityOverlay}*/;

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170713.1 | Last Updated 17 Jul 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100