Question

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

这是我的模态代码

<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…</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的响应

Answer 1

使用jquery。这是一个非常的基本示例，假设您的webservice是位于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/

Answer 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>

在bootstrap中确认删除模式

2 个答案: