代码：

@model IEnumerable<TPTMVC.Models.User>
@using TPTMVC.Models;    
@{ViewBag.Title = "Index";}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(document).ready
    (
        function () 
        {               
            $("#opener").click(function () {
                $("#dialog100").dialog("open");<--Not opening
            });
            $("#dialog100").dialog({ autoOpen: false });  
        }
    );   
</script>
<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<button id="opener">open the dialog</button>
<div id="dialog100" title="Dialog Title">I'm a dialog</div>

结果：

enter image description here

我正在使用C＃的实体框架。

更新

$(document).ready(function () {        
        $('#opener').click(function () {
            alert("Click");//It's show
            $('#dialog100').dialog('open');
            return false;
        });
        $('#dialog100').dialog({ autoOpen: false });//After
    });

在这种情况下，警报工作

$(document).ready(function () {
        $('#dialog100').dialog({ autoOpen: false });//Before
        $('#opener').click(function () {
            alert("Click");//it's not show
            $('#dialog100').dialog('open');
            return false;
        });
    });

在此不是。

解决方案：

  @section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#dialog100').dialog({ autoOpen: false });
        $('#opener').click(function () {
            alert("Bum");
            $('#dialog100').dialog('open');
            return false;
        });
    }); 

</script>
}

缺少@section Scripts

感谢您的帮助！

Answer 1

尝试$('#dialog100').dialog('open');

...或

$(document).ready(function () { 
    $('#dialog100').dialog({ autoOpen: false });
    $('#opener').click(function () {
        $('#dialog100').dialog('open');
        return false;
    });
});

编辑：根据评论

使用Chrome，按F12，然后检查资源以确保您正在加载它们......

enter image description here

您的屏幕应该如下所示，只显示按钮...

enter image description here

然后，click事件应显示对话框...

enter image description here

此视图是否包含在_layout中？如果是这样，你错过了section。通常，_layout文件将包含一个脚本部分，您需要在视图的此脚本部分中包含您的JS代码...

Layout.cshtml

@RenderSection("scripts", required: false)

view.cshtml

@section Scripts { ..jquery scripts..}

Answer 2

您的对话设置似乎发生在点击事件中，因此无法正确设置。它需要在click事件之外发生。

这是一个有效的例子......

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Animation</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>


</body>
</html>

Jquery Dialog没有在我的简单代码中打开

代码：

更新

解决方案：

2 个答案: