How to make J-Query ui dialog, modal using jquery ui 1.8.17

Question

0.00/5 (No votes)

See more:

My code is as follows :

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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');
            $('#dialogDiv').dialog({
                resizable: false,
                height: 140,
                modal: true,
                autoOpen: false,
            });
            $('#btnLoad').click(function () {
                $('#dialogDiv').dialog('open');
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnLoad" Text="Load" runat="server" />
        </div>
    </form>
</body>
</html>

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

Pratik Gaikwad

Add a Solution

Comments

ZurdoDev 13-Jul-13 22:08pm

Where is dialogDiv?

Sergey Alexandrovich Kryukov 14-Jul-13 0:49am

Not clear. jQuery UI Dialog plug-in already implements modal behavior. Are you sure that your button is really outside of this dialog?
—SA

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..?
—SA

Pratik Gaikwad 17-Jul-13 14:56pm

http://www.codeproject.com/Questions/621927/dynamically-loaded-Jquery-dialog-does-not-close-on
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...
http://www.codeproject.com/Questions/621927/dynamically-loaded-Jquery-dialog-does-not-close-on

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Pratik Gaikwad · Accepted Answer · 2013-07-17T08:37:00

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

C#

.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}*/;
        }