Question

我想尝试使用bootstrap 4本机模式创建一个确认对话框，而不使用插件（bootbox等），如javascript确认窗口。

JS

if ( !confirm( "Are you sure?" ) ) return false;

为此，我使用此代码

<div class="modal" id="confirm-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-text"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-response="ok">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我的目标是创建一个函数来打开按下保存更改按钮时返回true的模式，以便将其用作确认javascript

function confirmModal( txt ) {
    $('#confirm-modal').modal('show').find('.modal-text').text(txt);
    $('[data-response="ok"]').on('click', function() {
       ?? return true;
    });
}

if ( !confirmModal( "Are you sure?" ) ) return false;

可以这样做，我该怎么做？谢谢

Answer 1

您可以创建一个函数，在其中添加填充模态所需的所有信息，然后定义回调函数，以便在用户单击保存或取消时执行该操作。

在这个例子中，我添加了标题，消息和回调。您还可以为ok和cancel按钮添加文本参数。我没有在演示中添加任何CSS样式......

function initModal(modalElem, title, message, okCallback, cancelCallback) {
  modalElem.find('.modal-title').text(title);
  modalElem.find('.modal-text').text(message);
  modalElem.show();
  
  modalElem.find('.btn-primary').on('click', function() {
    if(typeof okCallback === 'function') {
      modalElem.hide();
      okCallback();
    }
  });
  modalElem.find('.btn-secondary, .close').on('click', function() {
    if(typeof okCallback === 'function') {
      modalElem.hide();
      cancelCallback();
    }
  });
}

function yesFunc() {
  $('#status').text('Changes have been changed');
  $('#status').show();
  $('#save').show();
  // Do other saving stuff here...
  return true;
}

function noFunc() {
  $('#status').text('Changes have been discarded');
  $('#status').show();
  $('#save').show();
  // Do other cancel stuff here...
  return false;
}

var modalElem = $('#confirm-modal');

$('#save').on('click', function() {
  initModal(modalElem, 'Save modal', 'Do you want to save?', yesFunc, noFunc);
  $(this).hide();
  $('#status').hide();
});

#confirm-modal, #status {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal" id="confirm-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-text"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-response="ok">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<button type="button" id="save">Save my changes</button>
<div id="status"></div>

如何创建一个像javascript确认的Boostrap 4模态确认对话框

1 个答案: