国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

為什麼我的 Bootstrap 5 彈出視窗在關(guān)閉並重新開(kāi)啟它所在的模式後失去了打開(kāi)焦點(diǎn)的能力？
P粉022501495
P粉022501495 2024-03-28 23:27:50
0
1
589

我的 Bootstrap 5 模式和放置在其上的彈出視窗有問(wèn)題。

在我的 HTML 中，我有以下內(nèi)容，當(dāng)使用者將滑鼠懸停在按鈕上時(shí)，它會(huì)正確顯示。彈出視窗顯示「您確定嗎？」鍵入提示並建議使用者按一下按鈕（懸停）以繼續(xù)。單擊該按鈕即可獲取焦點(diǎn)並保持彈出視窗打開(kāi)，直到再次單擊或單擊離開(kāi)該元素。

這允許滑鼠指標(biāo)進(jìn)入彈出視窗內(nèi)容並點(diǎn)擊“繼續(xù)”按鈕。

這就是我想要的東西：https://bootstrap-confirmation.js.org，但有一些有關(guān)按鈕懸停時(shí)顯示的功能的更多詳細(xì)資訊...

不管怎樣，效果很好！第一次...如果模式被隱藏然後再次顯示，則只有彈出視窗觸發(fā)器的懸停部分起作用，並且單擊按鈕確實(shí)會(huì)觸發(fā)它的偵聽(tīng)器，但彈出視窗拒絕保持開(kāi)啟狀態(tài)（根據(jù)“焦點(diǎn)”觸發(fā)器） )..

請(qǐng)幫忙，這讓我發(fā)瘋！

令人沮喪的是，下面的程式碼片段似乎確實(shí)有效，儘管在關(guān)閉並重新開(kāi)啟模式時(shí)會(huì)拋出錯(cuò)誤，我不確定為什麼？

編輯新增：Chrome 和 Safari 中都存在此問(wèn)題，Safari 將建立控制臺(tái)錯(cuò)誤：

[Error] TypeError: undefined is not an object (evaluating 't.nodeType')

    o (bootstrap.bundle.min.js:6:823)
    _typeCheckConfig (bootstrap.bundle.min.js:6:7060)
    _getConfig (bootstrap.bundle.min.js:6:69112)
    W (bootstrap.bundle.min.js:6:7420)
    cn (bootstrap.bundle.min.js:6:62612)
    un
    (anonymous function) (locate_dev.js:394)
    dispatchEvent
    trigger (bootstrap.bundle.min.js:6:5516)
    (anonymous function) (bootstrap.bundle.min.js:6:52949)
    a (bootstrap.bundle.min.js:6:2488)
    dispatchEvent
    s (bootstrap.bundle.min.js:6:736)
    (anonymous function) (bootstrap.bundle.min.js:6:2539)

locate_dev.js 第 394 行的程式碼是彈出視窗初始化，可疑：

// 1 - Init the popover
        var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            content: $('[data-name="close-btn-popover-content"]')
        });

let locateScreen = new bootstrap.Modal(document.getElementById('locateScreen'));

const locateModal = document.getElementById('locateScreen')
locateModal.addEventListener('shown.bs.modal', event => {

  const locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
    html: true,
    sanitize: false,
    customClass: 'locate-footer-popover',
    title: "Are you sure?",
    //      trigger: 'focus',
    content: $('[data-name="close-btn-popover-content"]')
  });

  // 2 - Listen for clicks on the 'Close' button
  $('#locate-btn-close').off('click');
  $('#locate-btn-close').on('click', function() {

    // This is firing, but the popover is closing when the mouse moves towards
    // the buttons, after the modal is shown once, hidden, then re-displayed.

    // Show popover buttons in popover 
    $('[data-name="close-btn-popover-content"] .confirm-buttons').show();

    // Assign listeners to the popover confirm buttons
    //$('#locate-btn-close-confirm').off()
    $('#locate-btn-close-confirm').on('click', function() { // Close Session screen
      
      locateScreen.hide();
      
    });

    // Hide 'Click to continue' text
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').hide()
  });

  // When the popover is initially shown, hide the buttons and make sure the text reads:
  // 'click the button to continue', etc
  $('#locate-btn-close').on('inserted.bs.popover', function() {

    $('[data-name="close-btn-popover-content"] .confirm-buttons').hide()
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').show()
  });
  
  
});

locateModal.addEventListener('hidden.bs.modal', event => {
        
        // At this point the  $('[data-name="close-btn-popover-content"]') has been removed....
        // Lets add it back in
        $('#popover-close-btn-holder').html('<div data-name="close-btn-popover-content"><div class="col-sm-12 input-group-sm"><p>You can choose to close or save this session at the next screen.</p><p class="continue-text">Click the button to continue...</p></div><div class="text-center confirm-buttons" style="display:none;"><button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button><button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button></div></div>');
        
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link  rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#locateScreen">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="locateScreen" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Popover is on the Save Changes button. Click continue, which will hide the modal. Open it again from the button. On my own code the 'focus' part of the popover is lost and I can't get the mouse over the popover. Here it seems to work. No idea why. However the event listener on the confirm button is lost still.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <a id="locate-btn-close" tabindex="0" class="btn btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Save Changes</a>

        <!-- popover -->

        <div id="popover-close-btn-holder" class="d-none">
          <div data-name="close-btn-popover-content">
            <div class="col-sm-12 input-group-sm">
              <p class="continue-text">Click the button to continue...</p>
            </div>
            <div class="text-center confirm-buttons" style="display:none;">
              <button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button>
              <button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

似乎會(huì)產(chǎn)生錯(cuò)誤，因?yàn)閺棾鲆暣暗膬?nèi)容在模式被隱藏和重新顯示之間的某個(gè)時(shí)刻消失。

考慮：

var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            content: $('[data-name="close-btn-popover-content"]')
        });

測(cè)試 $('[data-name="close-btn-popover-content"]') 完全不回傳任何內(nèi)容。在初始化模式時(shí)（在初始化彈出視窗之前）手動(dòng)將其附加到父 div 也沒(méi)有幫助。

P粉022501495
P粉022501495

全部回覆(1)
P粉436688931

解決了！

我從按鈕 HTML 中刪除了 data-bs-trigger="hover focus" 屬性並使用：

locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            trigger: 'hover focus',
            content: $('[data-name="close-btn-popover-content"]')
        });

我還需要在'hidden.bs.modal' 上重建$('[data-name="close-btn-popover-content"]') 中的內(nèi)容，如下圖所示：

locateModal.addEventListener('hidden.bs.modal', event => {
        
        // At this point the  $('[data-name="close-btn-popover-content"]') has been removed....
        // Lets add it back in
        $('#popover-close-btn-holder').html('




You can choose to close or save this session at the next screen.


Click the button to continue...





');
        
    });
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板