ASP.NET WebForms - Как подавить действия кликов в TreeView с помощью JQuery?

Question

У меня есть следующий код:

<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>

• При запуске это выглядит так: ( Ссылка на изображение )
• Когда я нажимаю на ссылку Добавить новый в разделе «Пользователи», я получаю следующее: ( Ссылка на изображение )
• Когда я нажимаю на ссылку ** Переместить компанию ** в разделе сведений о компании, я получаю следующее: ( Ссылка на изображение )

Теперь все работает хорошо - до Я нажимаю на узел в дереве в моем модальном всплывающем окне. Затем он выходит из всплывающего окна, и я не хочу этого. Я не очень хорош в JQuery (вышеприведенный JQuery не мой), и я пытался подавить события щелчка на узле с помощью закомментированного кода, приведенного выше, но все, что я сделал, это запретил показ всего всплывающего окна!

Есть какие-нибудь идеи о том, что я могу сделать, чтобы подавить щелчки узлов от запуска процедуры закрытия JQuery для модального всплывающего окна?

ТИА

Answer 1

Обычно вы можете возвращать false из события click элемента, чтобы браузер не мог его обработать.

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

Answer 2

Я не уверен, почему код запретил запуск диалога, но вы использовали селектор класса вместо селектора идентификатора.Вам также, вероятно, нужно остановить распространение события.

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