ASP.NET WebForms - How to suppress click actions on TreeView with JQuery?

I have the following code:

<asp:Content ID="StyleContent" ContentPlaceHolderID="StyleContent" runat="server">
    <style type="text/css">
        #mask
        {
            position:absolute;
            left:0;
            top:0;
            z-index:9000;
            background-color:grey;
            display:none;
        }

        #boxes .window 
        {
            position:absolute;
            left:0;
            top:0;
            width:440px;
            height:200px;
            display:none;
            z-index:9999;
            padding:20px;
        }

        #boxes #modalwindow 
        {
            width:800px;
            height:330px;
            padding:10px;
            background-color:#b9d3ee;
            border: solid 2px #648abd
        }

        #boxes2 .window 
        {
            position:absolute;
            left:0;
            top:0;
            width:440px;
            height:200px;
            display:none;
            z-index:9999;
            padding:20px;
        }

        #boxes2 #modalwindowMoveCompany 
        {
            width:350px;
            height:800px;
            padding:10px;
            background-color:#ffffff;
            border: solid 2px #648abd
        }

        .stylecenter
        {
            text-align: center;
        }
    </style>
</asp:Content>
<asp:Content ID="ScriptContent" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {

            // Set up for displaying modal dialogs
            $('a[name=modal]').click(function (e) {
                // Prevent the default link behavior of navigation so we can use the link to show the Window
                e.preventDefault();

                // Determine which href was clicked if it was in fact an href (though this demo as only one.) 
                var id = $(this).attr('href');

                // Determine browser windows dimensions. 
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                // Set dimensions for the mask to opaque the screen when the modal window is displayed.
                $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                // Make the Window Opaque        
                $('#mask').fadeIn("fast");
                $('#mask').fadeTo("slow", 0.8);

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                // Set the Modal Window's dimensions to center in the browser window.
                $(id).css('top', winH / 2 - $(id).height() / 2);
                $(id).css('left', winW / 2 - $(id).width() / 2);

                // Show the Modal Window
                $(id).fadeIn("fast");

            });

//            // Suppress the node click in the CompanyTreeTarget control
//            $('.IgnoreClicksInHere').click(function (e) {
//                // Cancel the link behavior
//                e.preventDefault();
//            }

            // Handle Close Button Click Event
            $('.window .close').click(function (e) {
                // Cancel the link behavior
                e.preventDefault();

                $('#mask').hide();
                $('.window').hide();
            });

            // The user clicks OUTSIDE the Modal Window and the window will be closed without save.
            $('#mask').click(function (开发者_运维技巧) {
                $(this).hide();
                $('.window').hide();
            });
        });
    </script>
</asp:Content>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    ...

    <div id="boxes2">
        <div id="modalwindowMoveCompany" class="window">
            <center>Select company to be the new parent</center>
            <div id="IgnoreClicksInHere" class="PrettyTree">
                <uc1:CompanyTree ID="CompanyTreeTarget" runat="server" />
            </div>
            <asp:Button ID="SaveMoveCompany" runat="server" Text="Execute" onclick="SaveMoveCompany_Click" />&nbsp;* To cancel just click on the grey area outside this dialog box.
        </div>
        <!-- Mask to cover the whole screen -->
        <div id="Div3"></div>
    </div>
    <div id="boxes">
        <div id="modalwindow" class="window">
            <%--<center>Enter New User</center>--%><br />
            <riv:UserDialog ID="UserDialog" runat="server" />
            <%--<asp:Button ID="btnCancel" runat="server" OnClick="btnCancel_Click" Text="Cancel" Width="100px" />--%>
            <%--<asp:Button ID="btnCreate" runat="server" OnClick="btnCreate_Click" Text="Create" Width="100px" />--%>
            <asp:Button ID="ModalButton" runat="server" Text="Save User" onclick="ModalButton_Click" />&nbsp;* To cancel just click on the grey area outside this dialog box.
        </div>
        <!-- Mask to cover the whole screen -->
        <div id="mask"></div>
    </div>
</asp:Content>

• When running it looks like this: (Image Link)
• When I click on the Add New link in the Users section I get this: (Image Link)
• When I click on the ** Move Company** link in the company details section I get this: (Image Link)

Now, everything is working good so far - until I click on a node in the tree within my modal popup. It then exits the popup and I don't want it to. I am not good at JQuery (the JQuery above is not mine) and I tried to suppress the node click events with the commented out code above but all that did was suppress the entire popup from showing!

Any ideas on what I can do to suppress the node clicks from firing the JQuery close routine for the modal popup?

TIA

I'm not sure why the code prevented the dialog from firing, but you've used a class selector instead of an id selector. You also probably need to stop the event from propagating as well.

//
// Suppress the node click in the CompanyTreeTarget control
$('#IgnoreClicksInHere').click(function (e) {
    return false;  // prevents default action (on div?) and stops propagation up
}); 

You can typically return false from a element's click event to prevent the browser from handling it.

$('node').click(function() { return false; });