Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
My code is as follows :
 
<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 9:42am
Comments
ryanb31 at 13-Jul-13 22:08pm
   
Where is dialogDiv?
Sergey Alexandrovich Kryukov at 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 at 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 at 17-Jul-13 14:55pm
   
Which is..?
—SA
Pratik Gaikwad at 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 at 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

Rate this: bad
good
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}*/;
        }
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 495
1 Maciej Los 340
2 Richard MacCutchan 265
3 BillWoodruff 225
4 Mathew Soji 200
0 OriginalGriff 8,804
1 Sergey Alexandrovich Kryukov 7,457
2 DamithSL 5,689
3 Maciej Los 5,279
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web03 | 2.8.1411028.1 | Last Updated 17 Jul 2013
Copyright © CodeProject, 1999-2014
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