台灣最大程式設計社群網站
線上人數
1052
 
會員總數:245227
討論主題:189098
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> 關於bootstrap卡片關閉功能
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
關於bootstrap卡片關閉功能
價值 : 50 QP  點閱數:234 回應數:6

樓主

kimich7
門外漢
0 1
54 4
發送站內信

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

第一張Card:


第二張Card:


第三張Card:


搜尋相關Tags的文章: [ javascript ] , [ jQuery ] , [ Bootstrap ] ,
本篇文章發表於2019-07-02 15:26
== 簽名檔 ==
學無止境
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

彩虹
檢舉此回應
依你目前提供的html,沒有太大問題
我直接貼過來是可以關閉的

目前只能判斷應該是 html 結構有些結尾沒做好
例如:更外層或其他地方的結構有少好幾個</div>、</li>、</section> ...這些結尾等,而導致第一個 modal 可能出錯

你先試試看把第一個modal 整塊拔起來,放到其他地方試試看∼搞不好就成功了

如果一樣無法,那你直接在做一個新的 modal 試試看
1.一步一步做,先建立一個空的modal,測試能不能關閉
2.如果可以,就慢慢把功能加上去

本篇文章回覆於2019-07-04 11:13
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

kimich7
檢舉此回應
感謝彩虹大大的回應

我有測試將另外兩個先刪除只留不行的這一個,讓架構變的單純,但是執行結果依然是沒有反應
另外我將沒反應的其中一個按鈕給予一個id=xxbtn,然後再JS內寫

用chrome的檢查工具(DevTools)的Network去看執行的狀況,結果是完全沒有觸發event,我已經束手無策了Orz
本篇文章回覆於2019-07-05 11:36
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
作者回應

kimich7
檢舉此回應
我剛另外開一個新的網頁,甚麼都沒寫,就只寫一個按鈕,然後呼叫這張卡片,都已經扒光光了還是毫無反應Orz

本篇文章回覆於2019-07-05 11:48
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

kimich7
檢舉此回應
我找到問題了,原來是我自己的疏忽,在我呼叫卡片的那個按鈕下錯參數



這個參數下錯
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行的部分

這裡是呼叫的方式,因為我是下data-toggle="collapse",這是摺疊非卡片,所以雖然出來的東西看起來是卡片,但他不是卡片(但這只是我自己的理解實際上是不是要在確認)
要變成卡片data-toggle="Model"才是,改完之後,我卡片上的程式碼沒有去改變,但關閉功能就可以正常使用了
本篇文章回覆於2019-07-07 12:54
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.