Javascript 从ASP页面中的Java脚本调用弹出窗口

我在ASP页面（MVC5-index.cshtml file-view）中使用以下脚本，我需要的是它而不是警报框 要打开带有用户和密码的弹出窗口，我应该如何操作？ 在mvc项目工具箱中有控件，但是我应该如何在弹出窗口中创建它们并在脚本中调用它呢

 <script type="text/javascript"> 
      $(document).ready(function () { 
         $("#M").change(function () { 
          if ($(this).val() == "F") { 


      $('#dv').dialog({
            width: 300, 
            height: 300,
            modal: true,
            resizable: true,
            open: function(type,data) {
              $(this).parent().appendTo("form");},
            autoOpen: true,  
            title: 'Sample'
        });
       } 
           } 
         }); 
      }); 
</script>

$（文档）.ready（函数（）{
$（“#M”）.change（函数（）{
如果（$（this.val（）=“F”）{
$（'#dv'）。对话框({
宽度：300，
身高：300，
莫代尔：是的，
可调整大小：正确，
打开：功能（类型、数据）{
$（this.parent（）.appendTo（“form”）；}，
自动打开：对，
标题：“样本”
});
} 
} 
}); 
}); 

添加我的视图代码

@model IEnumerable<Ad.Models.Ad>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script>


    <script type="text/javascript"> 
  $(document).ready(function () { 
     $("#M").change(function () { 
      if ($(this).val() == "F") { 


  $('#dv').dialog({
        width: 300, 
        height: 300,
        modal: true,
        resizable: true,
        open: function(type,data) {
          $(this).parent().appendTo("form");},
        autoOpen: true,  
        title: 'Sample'
    });
   } 
       } 
     }); 
  }); 

@model IEnumerable
$（文档）.ready（函数（）{
$（“#M”）.change（函数（）{
如果（$（this.val（）=“F”）{
$（'#dv'）。对话框({
宽度：300，
身高：300，
莫代尔：是的，
可调整大小：正确，
打开：功能（类型、数据）{
$（this.parent（）.appendTo（“form”）；}，
自动打开：对，
标题：“样本”
});
} 
} 
}); 
}); 

海

我的应用程序
p>
@使用（Html.BeginForm（））
{
}
@*
*@
@ActionLink（“创建”、“创建”，
null，htmlAttributes:new{@class=“mybtn”}）


a、 mybtn{
背景：#fa0088；
}
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Email）
@DisplayNameFor（model=>model.Gender）
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Email）
@DropDownListFor（modeleItem=>item.Geneder，item.Gender，new{id=“M”}）
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）|
@ActionLink（“详细信息”，“详细信息”，新的{id=item.id}）|
@ActionLink（“删除”，“删除”，新的{id=item.id}）

演示：

---

mvc jquery ui库中的已经包含在内。只需添加特定的捆绑包即可

@Scripts.Render("~/bundles/jqueryui")

现在可以使用jquery ui dialog（）作为警报

$（“测试消息”）.dialog（）；

谢谢RGS，我在更新后的帖子中添加了你的代码，但它不起作用。你能检查我是否遗漏了什么吗？@jeantehe，你必须为div标签添加'id'。在哪里？因为我在脚本之后添加它时，什么都没有发生，所以在下拉菜单中更改项目时，我看不到任何弹出窗口down@JeanTehhe，在演示中，我创建了一个“div”并分配“id”作为“dv”添加到div中。在这里面我添加了“Hai”消息。最初它被设置为在css中显示“none”。当选择值为“F”时，拨号框就会出现。对不起，因为我是新加入的，所以我不确定我是否了解你，当我添加div时，注意到发生了…我在脚本中添加了第二个代码，而不是aleart和注意到发生了…可以吗是否需要执行其他步骤？我在布局中找到了@Scripts.Render，Jquery库在哪里？

 $("#M").change(function () { 
          if ($(this).val() == "F") { 
              $('#dv').dialog({
                width: 300, 
                height: 300,
                modal: true,
                resizable: true,
                open: function(type,data) {
                  $(this).parent().appendTo("form");},
                autoOpen: true,  
                title: 'Sample'
            });
           } 
 });  

@Scripts.Render("~/bundles/jqueryui")

<script>
    $("<div>Test messsage</div>").dialog();
</script>