Question

我运行它：

@Html.ActionLink("TEST", "About", "Home", null,
       new { @class = "openDialog", data_dialog_id = "test"})

我表现得像：

$(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this).attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove() },
                    modal: true, 
                    width: 600,
                    height: 450

                })
                .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });

        $(".ui-widget-overlay").live("click", function () { $("#data-dialog-id").dialog("close"); });
    });

最后一个脚本块应该关闭覆盖点击对话框（我认为），但它不起作用？
当我打开模态窗口时这是整页：

   <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
    <meta charset="utf-8">
    <title>Home Page</title>
    <link href="/Content/Common.css" rel="stylesheet" type="text/css">


    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/document_iterator.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/find_proxy.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/get_html_text.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/global_constants.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/name_injection_builder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/number_injection_builder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/string_finder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/change_sink.js"></script><meta name="document_iterator.js"><meta name="find_proxy.js"><meta name="get_html_text.js"><meta name="global_constants.js"><meta name="name_injection_builder.js"><meta name="number_injection_builder.js"><meta name="string_finder.js"><meta name="change_sink.js"></head>
<body>
    <div class="page">
        <header>            

<div class="searchCityBox">
    <div id="logoBox" style="height: 25px; float: left;">
        <a href="">
            <img alt="logo" src="/Content/images/Logo.png">
        </a>
    </div>
    <div style="margin-top: 2px; float: right;">

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script>
    function onItemSelect(item) {

        //var siteRootUrl = 'localhost:51168';

        window.location.href = item;
    }

    $(function () {
        $("input#autocomplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Navigation/Search', type: "POST", dataType: "json",
                    data: { searchTerm: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Country.CountryCode + ':' + item.Name,
                                value: '/' + 'CityPage?country=' + item.Country.CountryCode + '&city=' + item.Name
                                //value: '/' + item.Country.CountryCode + '/' + item.Name
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                onItemSelect(ui.item.value);
            }
        });
    });
</script>
<style>
    #autocomplete
    {
        width: 250px;
        font-size: 12px;    
    }
</style>
<div>
    <input id="autocomplete" type="text" placeholder="City Search..." class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>        

    </div>
    <div style="margin-top: 2px; float: right;">
            [ <a href="/login">Log On</a> ]

    </div>
</div>
            <nav>
            </nav>
        </header>
        <section id="main">
            <style>
    .ui-dialog-titlebar
    {
        display: none;
    }

</style>
<script>
    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this).attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove() },
                    modal: true,
                    width: 600,
                    height: 450

                })
                .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });

        $(".ui-widget-overlay").live("click", function () {
            alert($("#data-dialog-id").size()); 
            $(".dialog").dialog("close")
        });
    });
</script>
<p>
    Welcome to , !
</p>
<a class="openDialog" data-dialog-id="test" href="/Home/About">TEST</a>

        </section>
        <footer>
        </footer>
    </div>


<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul><div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 600px; position: absolute; top: 110px; left: 379px; display: block; z-index: 1002; " class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-test"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-test">&nbsp;</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div class="dialog ui-dialog-content ui-widget-content" id="test" style="width: auto; min-height: 0px; height: 434px; ">


    <meta charset="utf-8">
    <title>About Us</title>
    <link href="/Content/Common.css" rel="stylesheet" type="text/css">







    <div class="page">
        <header>            

<div class="searchCityBox">
    <div id="logoBox" style="height: 25px; float: left;">
        <a href="">
            <img alt="logo" src="/Content/images/MyCityNookLogo.png">
        </a>
    </div>
    <div style="margin-top: 2px; float: right;">

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">

<style>
    #autocomplete
    {
        width: 250px;
        font-size: 12px;    
    }
</style>
<div>
    <input id="autocomplete" type="text" placeholder="City Search..." class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>        

    </div>
    <div style="margin-top: 2px; float: right;">
            [ <a href="/login">Log On</a> ]

    </div>
</div>
            <nav>
            </nav>
        </header>
        <section id="main">

<h2>About</h2>
<p>
     Put content here.
</p>

        </section>
        <footer>
        </footer>
    </div>


</div><div class="ui-resizable-handle ui-resizable-n"></div><div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-w"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; "></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; "></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; "></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; "></div></div><div class="ui-widget-overlay" style="z-index: 1001; width: 1349px; height: 568px; "></div><ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul><ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1003; top: 0px; left: 0px; display: none; "></ul></body><span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span><object id="skype_plugin_object" location.href="http://localhost:51168/" location.hostname="localhost" style="position: absolute; visibility: hidden; left: -100px; top: -100px; " width="0" height="0" type="application/x-vnd.skype.click2call.chrome.5.6.0"></object></html>

Answer 1

您选择了一个ID“data-dialog-id”，但我看不到您在链接上设置它的位置。

从

的最后一行更改以下代码

$("#data-dialog-id").dialog("close");

到这个

$(".openDialog").dialog("close");

它可能会起作用

更新

好的，我创建了一个有效的jsfiddle here

问题是你的最后一行，你需要使用$（“＃test”）而不是$（“＃data-dialog-id”）

我无法在叠加点击上关闭jQuery UI对话框模式

1 个答案: