關於bootstrap卡片關閉功能- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1438

會員總數：246736
討論主題：190152

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> AJAX / JSON / jQuery >> 關於bootstrap卡片關閉功能

[]

[我要回覆]

關於bootstrap卡片關閉功能
價值 : 50 QP 點閱數:965 回應數:6

樓主

kimich7

0	1
54	4

發送站內信

我寫了一個網站，這當中使用了三個Bootstrap的Card，每個Card上有三個按鈕分別是1. 關閉。2. 送出。3. 一樣是關閉的X按鈕(aria-label="Close")
我的問題是三個哪片中的一個它的關閉按鈕與X按鈕點擊後沒有反應，但是另外兩個Card則沒有問題，而寫的方式是一模一樣，上網爬文了很久還是沒有到為什麼，是否有搞手能幫我解惑呢?謝謝各位大大。
其程式碼如下：

第一張Card：

<div class="modal fade" id="ModalCenter1" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ModalLongTitle">選擇日期/院區/班別</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">//-------------X按鈕
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

.......卡片內容......

第二張Card：

<form action="abnormal.php" method="post" enctype="multipart/form-data">
            <div class="modal fade" id="ModalCenter3" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="ModalLongTitle">異常表單</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">//-------------X按鈕
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        
                     .......卡片內容......

第三張Card：

<form action="" method="post" enctype="multipart/form-data" id="MMT_Kind" name="MMT_Kind">
            <div class="modal fade" id="ModalCenter4" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="ModalLongTitle">保養系統選擇</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">//-------------X按鈕(沒反應)
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>                        
                        
                     .......卡片內容......
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>//-------------關閉按鈕(沒反應)
                            <button type="submit" class="btn btn-primary" id="mmtbtn" name="mmtbtn">送出</button>//-----------------送出按鈕
                        </div>
                    </div>
                </div>
            </div>
        </form>

搜尋相關Tags的文章： [ javascript ] , [ jQuery ] , [ Bootstrap ] ,
本篇文章發表於2019-07-02 15:26

== 簽名檔 ==
學無止境

1樓回應彩虹	依你目前提供的html，沒有太大問題我直接貼過來是可以關閉的目前只能判斷應該是 html 結構有些結尾沒做好例如：更外層或其他地方的結構有少好幾個</div>、</li>、</section> ...這些結尾等，而導致第一個 modal 可能出錯你先試試看把第一個modal 整塊拔起來，放到其他地方試試看～搞不好就成功了如果一樣無法，那你直接在做一個新的 modal 試試看 1.一步一步做，先建立一個空的modal，測試能不能關閉 2.如果可以，就慢慢把功能加上去本篇文章回覆於2019-07-04 11:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應 kimich7	感謝彩虹大大的回應我有測試將另外兩個先刪除只留不行的這一個，讓架構變的單純，但是執行結果依然是沒有反應另外我將沒反應的其中一個按鈕給予一個id=xxbtn，然後再JS內寫 $("#xxbtn").click(function () { alert('我超帥'); })h 用chrome的檢查工具(DevTools)的Network去看執行的狀況，結果是完全沒有觸發event，我已經束手無策了Orz 本篇文章回覆於2019-07-05 11:36 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應 kimich7	我剛另外開一個新的網頁，甚麼都沒寫，就只寫一個按鈕，然後呼叫這張卡片，都已經扒光光了還是毫無反應Orz <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 連結外部的CSS --> <link rel="stylesheet" href="./css/bootstrap.css"> <link href="./node_modules/fontawesome-free-5.0.6/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet"> <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css"> <!-- 連結自己的CSS --> <link rel="stylesheet" href="./css/style.css"> <!-- 連結外部的JS --> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- 連結自己的JS --> <script src="./js/main.js"></script> <title>Document</title> </head> <body> <div class="mainMenu"> <div class="text-muted"> <i class="fas fa-7x fa-file-alt my-3"></i> <h2>工務設備保養紀錄文件及管理系統</h2> <span class="billBoard3" tabindex="0" data-toggle="tooltip" data-placement="bottom" title="請登入相應權限帳號已解鎖"> <button style="pointer-events: none;" type="button" class="mainBtn autho3" data-toggle="collapse" data-target="#ModalCenter4" id="mainBtn2222">點我進入</button> </span> </div> </div> <!-- 保養卡片20190613 --> <form action="" method="post" enctype="multipart/form-data" id="MMT_Kind" name="MMT_Kind"> <div class="modal fade" id="ModalCenter4" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLongTitle">保養系統選擇</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="mmtsys">保養系統選擇</label> <select class="form-control mb-3 mmtcookiecs" id="mmtchoice" name="mmtchoice" required> <option selected>選擇系統</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" id="xxbtn">關閉</button> <button type="submit" class="btn btn-primary" id="mmtbtn" name="mmtbtn">送出</button> </div> </div> </div> </div> </form> </body> </html> 本篇文章回覆於2019-07-05 11:48 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應 kimich7	我找到問題了，原來是我自己的疏忽，在我呼叫卡片的那個按鈕下錯參數 <button style="pointer-events: none;" type="button" class="mainBtn autho3" data-toggle="collapse" data-target="#ModalCenter4" id="mainBtn2222">點我進入</button> 這個參數下錯 data-toggle="collapse" 應該要下 data-toggle="modal" 以上謝謝本篇文章回覆於2019-07-05 16:29 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應彩虹	怎麼好像跟你一開始發文的敘述差很多XD? 你一開始提到的是，已經彈出來的 modal，不管按「關閉」、還是按「X」，「都無法關閉 modal」然後 2~4 樓提供的程式碼，都是針對「點我進入」的按鈕按下去，「沒有彈出 modal」這樣的話，你第一個問題後來是什麼原因造成無法關閉呢? 本篇文章回覆於2019-07-07 06:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓作者回應 kimich7	是的，我的問題是卡片沒有辦法關閉，錯誤的地方是在我三樓程式碼第29、30行的部分 <button style="pointer-events: none;" type="button" class="mainBtn autho3" data-toggle="collapse" data-target="#ModalCenter4" id="mainBtn2222">點我進入</button> 這裡是呼叫的方式，因為我是下data-toggle="collapse"，這是摺疊非卡片，所以雖然出來的東西看起來是卡片，但他不是卡片(但這只是我自己的理解實際上是不是要在確認) 要變成卡片data-toggle="Model"才是，改完之後，我卡片上的程式碼沒有去改變，但關閉功能就可以正常使用了本篇文章回覆於2019-07-07 12:54 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓回應彩虹	依你目前提供的html，沒有太大問題我直接貼過來是可以關閉的目前只能判斷應該是 html 結構有些結尾沒做好例如：更外層或其他地方的結構有少好幾個</div>、</li>、</section> ...這些結尾等，而導致第一個 modal 可能出錯你先試試看把第一個modal 整塊拔起來，放到其他地方試試看～搞不好就成功了如果一樣無法，那你直接在做一個新的 modal 試試看 1.一步一步做，先建立一個空的modal，測試能不能關閉 2.如果可以，就慢慢把功能加上去本篇文章回覆於2019-07-04 11:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應 kimich7	感謝彩虹大大的回應我有測試將另外兩個先刪除只留不行的這一個，讓架構變的單純，但是執行結果依然是沒有反應另外我將沒反應的其中一個按鈕給予一個id=xxbtn，然後再JS內寫 $("#xxbtn").click(function () { alert('我超帥'); })h 用chrome的檢查工具(DevTools)的Network去看執行的狀況，結果是完全沒有觸發event，我已經束手無策了Orz 本篇文章回覆於2019-07-05 11:36 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應 kimich7	我剛另外開一個新的網頁，甚麼都沒寫，就只寫一個按鈕，然後呼叫這張卡片，都已經扒光光了還是毫無反應Orz <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 連結外部的CSS --> <link rel="stylesheet" href="./css/bootstrap.css"> <link href="./node_modules/fontawesome-free-5.0.6/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet"> <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css"> <!-- 連結自己的CSS --> <link rel="stylesheet" href="./css/style.css"> <!-- 連結外部的JS --> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- 連結自己的JS --> <script src="./js/main.js"></script> <title>Document</title> </head> <body> <div class="mainMenu"> <div class="text-muted"> <i class="fas fa-7x fa-file-alt my-3"></i> <h2>工務設備保養紀錄文件及管理系統</h2> <span class="billBoard3" tabindex="0" data-toggle="tooltip" data-placement="bottom" title="請登入相應權限帳號已解鎖"> <button style="pointer-events: none;" type="button" class="mainBtn autho3" data-toggle="collapse" data-target="#ModalCenter4" id="mainBtn2222">點我進入</button> </span> </div> </div> <!-- 保養卡片20190613 --> <form action="" method="post" enctype="multipart/form-data" id="MMT_Kind" name="MMT_Kind"> <div class="modal fade" id="ModalCenter4" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLongTitle">保養系統選擇</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="mmtsys">保養系統選擇</label> <select class="form-control mb-3 mmtcookiecs" id="mmtchoice" name="mmtchoice" required> <option selected>選擇系統</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" id="xxbtn">關閉</button> <button type="submit" class="btn btn-primary" id="mmtbtn" name="mmtbtn">送出</button> </div> </div> </div> </div> </form> </body> </html> 本篇文章回覆於2019-07-05 11:48 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應 kimich7	我找到問題了，原來是我自己的疏忽，在我呼叫卡片的那個按鈕下錯參數 <button style="pointer-events: none;" type="button" class="mainBtn autho3" data-toggle="collapse" data-target="#ModalCenter4" id="mainBtn2222">點我進入</button> 這個參數下錯 data-toggle="collapse" 應該要下 data-toggle="modal" 以上謝謝本篇文章回覆於2019-07-05 16:29 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應彩虹	怎麼好像跟你一開始發文的敘述差很多XD? 你一開始提到的是，已經彈出來的 modal，不管按「關閉」、還是按「X」，「都無法關閉 modal」然後 2~4 樓提供的程式碼，都是針對「點我進入」的按鈕按下去，「沒有彈出 modal」這樣的話，你第一個問題後來是什麼原因造成無法關閉呢? 本篇文章回覆於2019-07-07 06:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓作者回應 kimich7	是的，我的問題是卡片沒有辦法關閉，錯誤的地方是在我三樓程式碼第29、30行的部分 <button style="pointer-events: none;" type="button" class="mainBtn autho3" data-toggle="collapse" data-target="#ModalCenter4" id="mainBtn2222">點我進入</button> 這裡是呼叫的方式，因為我是下data-toggle="collapse"，這是摺疊非卡片，所以雖然出來的東西看起來是卡片，但他不是卡片(但這只是我自己的理解實際上是不是要在確認) 要變成卡片data-toggle="Model"才是，改完之後，我卡片上的程式碼沒有去改變，但關閉功能就可以正常使用了本篇文章回覆於2019-07-07 12:54 == 簽名檔 == --未登入的會員無法查看對方簽名檔--