1

我正在尝试实现删除行确认模式。我不知道该怎么做

这是我的模态代码

<div class="modal hide fade" id="myModal">
<div class="modal-header">
 <a class="close" data-dismiss="modal">×</a>
 <h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…&lt;/p>
</div>
<div class="modal-footer">
 <a href="#" data-dismiss="modal" class="btn">Cancel</a>
 <a href="#" class="btn btn-danger">Delete</a>
</div>
</div>

//这里是我调用模态的链接

<a data-toggle=\"modal\" class=\"btn btn-danger\" rel=\"tooltip\"  href=\"#myModal\"    title=\"Delete Survey\" >Delete</a>

在这里，我想将调查 id 传递给模态，以便当我在模态中单击按钮删除时，它应该删除受尊重的行。我不知道应该如何发送值

在删除选择按钮上，它应该通过 webservice 传递值并在警报框中记录 json 的响应

4

2 回答 2

2

使用引导程序的常见确认模式

    $(function () {
            (function ($) {
                $.fn.confirm = function (options) {
                    var settings = $.extend({}, $.fn.confirm.defaults, options);

                    return this.each(function () {
                        var element = this;
                        $('.modal-title', this).html(settings.title);
                        $('.message', this).html(settings.message);
                        $('.confirm', this).html(settings.confirm);
                        $('.dismiss', this).html(settings.dismiss);

                        $(this).on('click', '.confirm', function (event) {
                            $(element).data('confirm', true);
                        });

                        $(this).on('hide.bs.modal', function (event) {
                            if ($(this).data('confirm')) {
                                $(this).trigger('confirm', event);
                                $(this).removeData('confirm');
                            } else {
                                $(this).trigger('dismiss', event);
                            }

                            $(this).off('confirm dismiss');
                        });

                        $(this).modal('show');
                    });
                };

                $.fn.confirm.defaults = {
                    title: 'Modal title',
                    message: 'One fine body&hellip;',
                    confirm: 'OK',
                    dismiss: 'Cancel'
                };
            })(jQuery);
        });


$( "#Delete" ).click(function() {

 $('#confirm').confirm({
            title: 'confirmation',
            message: 'Do you want to delete ?',
            confirm: 'Delete',
            dismiss: 'dismiss'
        }).on({
            confirm: function () {
              alert( "ok" );
            },
            dismiss: function () {
                alert('dismiss');
            }
        });


  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="confirm-label"></h4>
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                    </div>
                    <div class="modal-body">
                        <div class="text-center wirningColor">
                            <i class="fas fa-exclamation-triangle fa-4x"></i>
                        </div>
                        <br />
                        <center>
                            <p class="message"></p>
                        </center>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger dismiss" data-dismiss="modal"></button>

                        <button type="button" class="btn btn-primary confirm" data-dismiss="modal"></button>

                    </div>
                </div>
            </div>
        </div>
        
  <button type="button" id="Delete"  class="btn btn-danger ">Delete</button>

于 2019-07-30T14:47:43.447 回答
0

使用 jQuery。这是一个非常基本的示例，假设您的 Web 服务是位于 www.example.com 的服务器上名为“delete_survey.php”的脚本：

<a href="#" class="btn btn-danger"
onclick="$.ajax('http://www.example.com/delete_survey.php?survey_id='+survey_id, {})">Delete</a>

我强烈建议您阅读 jquery ajax 文档，http://api.jquery.com/jQuery.ajax/

于 2012-04-14T18:58:16.963 回答