如何使用Javascript關閉Bootstrap (5.2)模態方塊?
P粉369196603
P粉369196603 2024-02-21 14:15:22
0
2
346

為了學校專案的緣故,我使用html中的bootstrap創建了一個模態,其中有一個提示,我必須從javascript檢查,如何從javascript關閉模態,以便在提示有效的情況下我可以只保存更改,如果不是,我會拋出異常嗎? 小註釋(請不要使用 jQuery,我見過一個類似的線程,它使用這個庫作為回复,禁止分配)

這是我的 html 程式碼:

<div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModal" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="bidModalLabel">Bid amount</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text" id="prompted">How much do you want to bet?</p>
                <div class="input-group mb-2">
                    <input id="bAmount" type="text" class="form-control text" aria-label="Amount of bet">
                    <span class="input-group-text">€</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel bid</button>
                <button type="button" onClick="bid()" class="btn btn-success">Save bid</button>
            </div>
        </div>
        </div>
    </div>

這是我的 JavaScript 程式碼:

function bid(){
    let valueOfBid = document.getElementById("bAmount").value;
    if(isNaN(valueOfBid)){
        //Cancel the prompt
    }

    players[realPlayer].bet=valueOfBid;
    changeButtonState(false);
    theTimer();
}

P粉369196603
P粉369196603

全部回覆(2)
P粉733166744

您可以將其新增至應關閉模式的元素...

data-bs-dismiss="modal"

以下模式根據搜尋字詞和使用者配對產生連結清單。

當他們點擊其中一個路由器連結時,由於該行,它將關閉模式

{{ user }}

上面的程式碼是在模態中產生的 -> 這是整個事情

P粉012875927

請嘗試這樣。我建議您在將我的程式碼新增至程式碼庫之前將 isNaN(valueOfBid) 變更為 valueOfBid == ""

function bid(){
    let valueOfBid = document.getElementById("bAmount").value;
    if(valueOfBid == ""){
      alert(1)
        //Cancel the prompt
      var myModalEl = document.getElementById('bidModal');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();
    }

    // players[realPlayer].bet=valueOfBid;
    // changeButtonState(false);
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板