引导模态显示和隐藏操作答案

【问题标题】：bootstrap modal showing and hide in operation引导模态显示和隐藏操作
【发布时间】：2014-06-28 12:02:29
【问题描述】：

在我的网站中，我使用了多个删除记录，每条记录都使用了复选框。

一切正常。我的工作就像我使用表格中的复选框选择记录并单击删除按钮并显示用于确认删除的模式是正常过程但表格没有记录并且我单击按钮删除简单警报显示为“未选择记录”但之后此更改模式弹出窗口会在几秒钟内显示并消失。

这是删除按钮，模式是显示。

<button 
                  data-toggle="modal" title="Delete makes" class="open-Delete btn btn-success" href="#Delete"
                  type="button" class="btn btn-success">Delete Makes</button>

这是点击删除按钮时调用的函数

<script type="text/javascript">

$('.chkSelectAll').click( function()
{
  $('.chkNumber').prop('checked', $(this).is(':checked'));
});

function Delete()
{
    var id = $("#bookId").val();
    var dataString="oper=delete&id="+id;
    $.ajax({
        url: "calls/makes-oper.php",
        type:'post',
        data:dataString,
        success: function(html)
        {
            if($.trim(html)=='success')
            {
              $('#Delete').modal('hide');
              window.location='makes.php';
            }
        }
    });
}
$(document).on("click", ".open-Delete", function() 
{
        var chkId="";
        $('.chkNumber:checked').each(function() 
        {
          chkId += $(this).val() + ",";
        });
        chkId =  chkId.slice(0,-1);
        if(chkId=="")
        {

          alert("No row is selected.!");
          $('#Delete').modal('hide');
        }
        else
        {
          $(".modal-body #bookId").val( chkId );
          //$('#Delete').modal('show');
        }
}); 
</script>

【问题讨论】：

您应该向我们提供一个 jsfiddle，以便为您提供一个工作示例。

标签： javascript html twitter-bootstrap

【解决方案1】：

如果我对您的理解正确，您希望“Delete Makes”按钮仅在选中某些复选框时打开模式。如果没有选中任何复选框，您希望显示警报并且不打开模式。对吗？

听起来，现在，您正在收到警报和模态。这也是正确的吗？

Bootstrap 有自己的事件来显示和隐藏模式。此事件由“Delete Makes”按钮上的data-toggle="modal" 属性控制。您需要删除此属性。这将阻止 Bootstrap 在单击按钮时显示模式。由于不会显示模态框，因此您不必隐藏它。只需显示警报即可。

接下来，您需要调整事件处理程序以手动显示模式。您可以使用$("#Delete").modal("show"); 手动显示模态。看起来您的代码中已经有该行，但已注释掉。我认为你是在正确的轨道上。

【讨论】：

感谢@Charis 的回复。但是如果删除数据切换模式无法工作。在我的代码模态中，当未选择行时不会显示模式，但是如果我对此使用hide方法，请在“警报消息”中出现后。谢谢
对不起，我不明白你的意思。你能用不同的词再说一遍吗？如果你发jsfiddle，我可以帮忙。

【解决方案2】：

我知道这是不久前被问到的，但如果其他人有同样的问题，我是这样解决同样问题的：

HTML：

<button type="button" class="btn btn-default" id="deleteButton">
    <i class="fa fa-trash"></i> Delete 
</button>

<div class="modal fade" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">Confirm Deletion</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-align-center">
                        <!--<div class="form-group">-->
                            <button type="button" class="btn btn-success" id="delete" data-dismiss="modal">
                                Yes
                            </button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">
                                No
                            </button>
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS：

$('#deleteButton').click(function() {
    var checkedValues = $('.checkbox:checked').map(function() {
        return this.value;
    }).get();

    if (checkedValues.length !== 0) {
        $('#deleteUserModal').modal('show');
    }
});

【讨论】：