Javascript 如何在“删除”按钮上创建模式窗口？

我想在我的删除按钮上创建一个确认窗口。 我在这里找到一些例子，但我不清楚

这是我的密码：

<form action="~/root/awards/DeleteAward" method="post" role="form">
    <div class="form-group">
        <input type="hidden" id="awardId" name="awardId" value="@award.Id">
    </div>
    <button type="submit" class="btn btn-danger">
        DELETE
        <i class="glyphicon glyphicon-remove-sign"></i>
    </button>
</form>

删除

---

如何创建一个简单的模式窗口，只需“确定吗？”和“是/否”选项？

我创建了一个简单的警报供您参考，希望这对您有所帮助

当用户单击按钮时

  <button id="openmodalpopup" name="openmodalpopup" data-modal-action="openconfimdialog"
        data-id="45">
    </button>

警报

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    Confirmation!</h4>
            </div>
            <div class="modal-body">
                Are You Sure want to delete ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    No</button>
                <button type="button" class="btn btn-primary" data-modal-action="yes">
                    Yes</button>
            </div>
        </div>
    </div>
</div>

        var awardid= "";
        $("[data-modal-action=openconfimdialog]").click(function () {
            awardid= $(this).attr("data-id");
            $("#myModal").modal("show");
        });

/*  <button type="button" class="btn btn-primary" data-modal-action="yes"> Yes</button> */
// when user click yes, already you stored the value in id, you can pass the vales in ajax and delete action

        $("[data-modal-action=yes]").click(function () {
            //call the delete ajax method 
            //awardid= 45
           deleteAward(awardid)  //calling delete method
      $("#myModal").modal("hide");
        });


     function deleteAward(awardid) { 
          var postData = {
            id: awardid
        };
            $.ajax({
                type: "post"
                url: "url for the action"
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(postData),
                success: function (data) {
                    //do you actions
                }
            });
        }

&时代；
确认书
确实要删除吗？
不
对

脚本

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    Confirmation!</h4>
            </div>
            <div class="modal-body">
                Are You Sure want to delete ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    No</button>
                <button type="button" class="btn btn-primary" data-modal-action="yes">
                    Yes</button>
            </div>
        </div>
    </div>
</div>

        var awardid= "";
        $("[data-modal-action=openconfimdialog]").click(function () {
            awardid= $(this).attr("data-id");
            $("#myModal").modal("show");
        });

/*  <button type="button" class="btn btn-primary" data-modal-action="yes"> Yes</button> */
// when user click yes, already you stored the value in id, you can pass the vales in ajax and delete action

        $("[data-modal-action=yes]").click(function () {
            //call the delete ajax method 
            //awardid= 45
           deleteAward(awardid)  //calling delete method
      $("#myModal").modal("hide");
        });


     function deleteAward(awardid) { 
          var postData = {
            id: awardid
        };
            $.ajax({
                type: "post"
                url: "url for the action"
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(postData),
                success: function (data) {
                    //do you actions
                }
            });
        }

var awardid=“”；
$（“[data modal action=openconfimdialog]”。单击（函数（）{
awardid=$（this.attr（“数据id”）；
$（#myModal”）.modal（“show”）；
});
/*对*/
//当用户单击yes时，您已经将值存储在id中，您可以在ajax中传递值并删除操作
$（“[data modal action=yes]”。单击（函数（）{
//调用deleteajax方法
//awardid=45
deleteAward（awardid）//调用delete方法
$（“#myModal”）.modal（“隐藏”）；
});
功能删除奖励（awardid）{
var postData={
id:awardid
};
$.ajax({
类型：“职位”
url:“操作的url”
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
数据：JSON.stringify（postData），
成功：功能（数据）{
//你有什么行动吗
}
});
}