问将确认()转换为引导模式对话框
EN

Stack Overflow用户

提问于 2021-07-02 01:21:04

回答 2查看 784关注 0票数 1

我有下面的代码，当我点击删除记录按钮时，它会在页面顶部打开一个普通的JS confirm()对话框。

我希望有相同的事情发生使用一个启动模式或jQuery确认对话框模式。

<a id="deleteCode" class="dTButtons" branchcode="val.BranchCode">
  <span id="delete">
    <img src="../Images/fi-rr-trash.svg"/>
  </span>
</a>

$(document).on("click", "#deleteCode", function() {
  var r = confirm("Are you sure you want to delete this item?");
  if (r == true) {
    var mode = "D";
    var branchcode = parseInt($(this).attr('branchcode'));
    DeleteBranch(branchcode, mode);
  } else {
    return false;
  }
});

function DeleteBranch(branchcode, mode) {
  var obj = {
    BranchCode: branchcode,
    Mode: mode
  }
  funCallAjax(savebranchsuccess, savebranchsuccess, '/api/mastersapi/DeleteBranch', obj, "POST");
}

javascript

jquery

云直播特惠9.9元起

基于腾讯云多年音视频能力积淀，支持超低延迟、超高画质、超大并发访问量的直播需求，满足客户的多样化直播需求

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-07-12 00:50:54

$(document).on("click", "#deleteCode", function () {
    //$('#deleteModal').modal().show();
    var txt;
    var codeid = parseInt($(this).attr('codeid'));
    $.confirm({
        title: 'Delete Record?',
        content: 'Are you sure You want to delete the record?',
        type: 'white',
        buttons: {
            ok: {
                text: "DELETE",
                btnClass: 'btn btn-danger',
                keys: ['enter'],
                action: function () {
                    DeleteZone(codeid);
                    $.alert({
                        title: 'Alert!',
                        content: 'Record Deleted successfully!',
                        confirm: function () {
                            tim
                            alert('Deleted Alert!');
                        }
                    });
                }
            },
            cancel: function () {
                console.log('the user clicked cancel');
            }
        }
    });
});

完美的解决方案，我已经实现了我自己的上述问题，Jquery确认在删除按钮单击。

票数 -1

Stack Overflow用户

发布于 2021-11-20 17:45:25

ES6和BootStrap 5.1

普通的香草JS。利用承诺。将引导模式模拟为具有相同行为的本机确认()

语法

result = await b_confirm(message)

参数

消息:要在确认对话框中显示的字符串。

返回值

指示选择了OK (真)还是Cancel (false)的布尔值

(async() => {
  const result = await b_confirm('IT WILL BE DELETED')
  alert(result)
})()

async function b_confirm(msg) {
  const modalElem = document.createElement('div')
  modalElem.id = "modal-confirm"
  modalElem.className = "modal"
  modalElem.innerHTML = `
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">             
        <div class="modal-body fs-6">
          <p>${msg}</p>
          <p>Are you sure?</p>
      </div>    <!-- modal-body -->
      <div class="modal-footer" style="border-top:0px">             
        <button id="modal-btn-descartar" type="button" class="btn btn-secondary">Cancel</button>
        <button id="modal-btn-aceptar" type="button" class="btn btn-primary">Accept</button>
      </div>
    </div>
  </div>
  `
  const myModal = new bootstrap.Modal(modalElem, {
    keyboard: false,
    backdrop: 'static'
  })
  myModal.show()

  return new Promise((resolve, reject) => {
    document.body.addEventListener('click', response)

    function response(e) {
      let bool = false
      if (e.target.id == 'modal-btn-descartar') bool = false
      else if (e.target.id == 'modal-btn-aceptar') bool = true
      else return

      document.body.removeEventListener('click', response)
      document.body.querySelector('.modal-backdrop').remove()
      modalElem.remove()
      resolve(bool)
    }
  })
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>