[英]How to display jquery modal popup on mvc 4 button click
我正在做一个只有一个按钮的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复制的样式信息(很多行代码,所以我不在这里发布)这是我的脚本和弹出代码。
<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');
})
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.