javascript - 如何在 mvc 4 按钮单击上显示 jquery 模式弹出窗口

标签 javascript jquery asp.net-mvc-4

我正在做一个 mvc 项目,其中有一个按钮。当我单击按钮时,应该会出现一个带有文本框和按钮的弹出窗口。我尝试如下。当页面首次加载所需的文本框和按钮时,而不是弹出页面(应该在单击按钮时显示),这是我尝试过的。

<head>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <link rel="stylesheet" href="/resources/demos/style.css">
</head>

我从 https://jqueryui.com/dialog/#modal-form(many 复制的样式信息代码行,所以我不在这里发布) 这是我的脚本和弹出代码。

<div id="dialog-form" title="Create new user">
    <form>
        <fieldset>

            <label for="name">Enter your Comments Here</label>

            <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
            <!-- Allow form submission with keyboard without duplicating the dialog button -->

            <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">

        </fieldset>

    </form>

</div>
<script>
    $("#Delete").button().on("click", function () {

        dialog.dialog("open");

    });


</script>

这是我的 mvc 代码。

@using (Html.BeginForm("Index", "TestRendering", FormMethod.Post))
    {
   <td scope="col"><input type="button" id="Delete" class="btn btn-primary btn-cons red" value="Delete" /></td>

    }

我在这个过程中出错了吗?谢谢。

最佳答案

试试这个

<input type="button" id="Delete" class="btn btn-primary btn-cons red" value="Delete" />

<div id="dialog-form" title="Create new user">
  <form>
    <fieldset>
      <label for="name">Enter your Comments Here</label>
      <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <!-- Allow form submission with keyboard without duplicating the dialog button -->

      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

JavaScript

$('#Delete').click(function() {
  $('#dialog-form').dialog('open');
});

jQuery(document).ready(function() {
  jQuery("#dialog-form").dialog({
    autoOpen: false,
    modal: true,
    open: function() {
      jQuery('.ui-widget-overlay').bind('click', function() {
        jQuery('#dialog').dialog('close');
      })
    }
  });
});

Updated Demo

关于javascript - 如何在 mvc 4 按钮单击上显示 jquery 模式弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35908354/

相关文章:

javascript - 如何删除html前面的字符串?

javascript - 悬停个人资料图片后带箭头的工具提示框

javascript - Mousemove vs mouseover vs 其他

jquery - 当用户在 jquery 中按下 Enter 键时,将 <br/> 隐藏在文本框中

javascript - Razor ForEach,点击获取值(value)

javascript - CSS 在缩略图悬停时显示元素

javascript - 如何在 jQuery 中上传图像后在输入字段中显示图像文件名

c# - ASP.NET MVC : Where to place code populating shared view?

asp.net-mvc-4 - HttpPostedFileBase 始终保持 null mvc

javascript - MVC 使用 MvcHtmlString.Create 添加 HTML 但具有 JavaScript 功能