Question

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)

现在,所有工作都做得好——until。我点击了我环绕的树苗中的 no。然后,它就离开了群众,我不想这样做。我不喜欢JQuery(上文提到的JQuery不是地雷),我试图用上文评论的法典来镇压点击事件,但这一切都压制了整个人群的面貌!

关于我能做些什么来压制点子,把JQuery的近身 routine射出来,以防波纹?

TIA

Answer 1

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
});

Answer 2

通常,你会从一次点击活动中回不实之处,以防止浏览器处理。

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

友情链接