Bootstrap 从JavaScript创建引导模式

jk9hmnmh  于 2023-10-14  发布在  Bootstrap
关注(0)|答案(3)|浏览(170)

我正试图包括一个JS CDN脚本来显示特定操作的消息。为了实现这一点,我试图让它首先在任何浏览器上工作。
这就是我正在努力做的:

document.querySelector('.circle').addEventListener('click', function() {
  var m1 = $(makeModal('Somehting here')); // I would want to skip creating an HTML element with jQuery.
  document.body.insertAdjacentHTML('beforeend', m1);
  m1.modal('show');
}, false);

function makeModal(text) {
  return `<div id="myModal" class="modal fade" role="dialog" style="display: none">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>${text}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>`;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>An app</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <button class="circle">Click here</button>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
</body>
</html>

这可以工作,但短语[object Object]被附加到按钮。另一件事,我猜每次有人点击按钮,节点被一次又一次地创建。
我应该在模态出现后删除它吗?好吧,你怎么会相信这些东西?

cclgggtu

cclgggtu1#

这段代码导致[object Object]

document.body.insertAdjacentHTML('beforeend', m1);

当我尝试没有这个代码,一切都很完美,你为什么要使用它?
如果他没有用,你可以直接删除他。

o2gm4chl

o2gm4chl2#

你只需要删除document.body.insertAdjacentHTML('beforeend', m1);来解决这个问题,因为insertAdjacentHTML()是用来将节点插入DOM树的,从你的代码中,我可以看到你试图在end之前插入一个节点。
请阅读Element.insertAdjacentHTML()
回答你的第二个问题,close <button>有一个属性data-dismiss="modal"用于关闭模态,所以简单地说,每次用户点击close按钮都会完全关闭模态。

ef1yzkbh

ef1yzkbh3#

你可以在JS上这样做:

function Modal(title, text, noBtnName='Close', yesBtnName='', yesBtnAction=()=>{}) {
    var wrap = _buildModal(title, text, noBtnName, yesBtnName, yesBtnAction)
    document.body.append(wrap)
    this.bsModal = bootstrap.Modal.getOrCreateInstance(wrap);
    this.show = function() {
        this.bsModal.show();
    }
}

function _buildModal(title, text, noBtnName, yesBtnName, yesBtnFunc) {
    var modal = document.createElement('div')
    modal.setAttribute('class', 'modal fade')
    modal.setAttribute('tabindex', '-1')
    modal.setAttribute('aria-labelledby', 'modalLabel')
    modal.setAttribute('aria-hidden', 'true')
    var modDialog = document.createElement('div')
    modDialog.setAttribute('class', 'modal-dialog')
    var modContent = document.createElement('div')
    modContent.setAttribute('class', 'modal-content')
    var header = _buildModalHeader(title)
    modContent.append(header)
    var body = document.createElement('div')
    body.setAttribute('class', 'modal-body')
    body.innerText = text
    modContent.append(body)
    var footer = _buildModalFooter(noBtnName, yesBtnName, yesBtnFunc)
    modContent.append(footer)
    modDialog.append(modContent)
    modal.append(modDialog)
    return modal
}

function _buildModalHeader(text) {
    var header = document.createElement('div');
    header.setAttribute('class', 'modal-header');
    header.setAttribute('style', 'border-bottom: none;');

    var title = document.createElement('h5');
    title.setAttribute('class', 'modal-title');
    title.setAttribute('id', 'modalLabel');
    title.innerText = text

    var closeBtn = document.createElement('button');
    closeBtn.setAttribute('class', 'btn-close');
    closeBtn.setAttribute('data-bs-dismiss', 'modal');
    closeBtn.setAttribute('aria-label', 'Close');

    header.append(title)
    header.append(closeBtn)
    return header
}

function _buildModalFooter(noBtnName, yesBtnName, yesBtnFunc) {
    var footer = document.createElement('div')
    footer.setAttribute('class', 'modal-footer')
    footer.setAttribute('style', 'border-top: none;')

    var noBtn = document.createElement('button')
    noBtn.setAttribute('type', 'button')
    noBtn.setAttribute('class', 'btn btn-secondary')
    noBtn.setAttribute('data-bs-dismiss', 'modal')
    noBtn.innerText = noBtnName
    footer.append(noBtn)

    if (yesBtnName && yesBtnFunc){
        var yesBtn = document.createElement('button')
        yesBtn.setAttribute('type', 'button')
        yesBtn.setAttribute('class', 'btn btn-primary')
        yesBtn.innerText = yesBtnName
        yesBtn.addEventListener('click', yesBtnFunc)
        footer.append(yesBtn)
    }
    return footer
}

那么modal call的例子是:

(new Modal(
    'Warning',            // title
    'Ducks are crossing the road', // text
    'Close',              // noBtnName
    'Confirm',            // yesBtnName
    ()=>{alert('yeah')},  // yesBtnFunction
    )).show()

在Bootstrap 5上运行,不需要jQuery。

相关问题