====== Popup ====== ===== plugin ===== * ++embedover|{{url>https://www.dokuwiki.org/plugin:embedover}}++ * [[doku>plugin:abbr|abbr]]\\ TW [台灣] Taiwan Independence (TI) * [[doku>plugin:annotate|annotate]]\\ 諸夏 <@anno:1>東亞諸國 * 預覽時似乎看不到效果 * [[doku>plugin:autotooltip|autotooltip]]\\ 本週主題感謝　神、聖靈吧本週主題 * 預覽時似乎看不到效果 ===== 試用 ===== ==== embedover ==== {(按|出來)} ↑誤會了。這並不是我想要的。 ===== 內建註解功能 ===== * /^20160613^/ 剛剛逛 DokuWiki.org 時發現，內建 footnote 功能是附有 popup 的！回來測試一下，footnote 裡可以放 include 的語法，包括引用個別段落！真想不到啊……想了一個多月，沒有合用的 plugin，然後 [[slider]] 法也失敗，最後發現 footnote 功能卻可能是最接近理想的方式…… ===== Bootstrap Wrapper ===== /^20160615^/ 天哪！之前知道有這套 plugin，不以為意，今天才知道裡面有這個東西：++Popovers [Lotar's Wiki]|[[http://www.lotar.altervista.org/dokuwiki/wiki/plugin/bootswrapper/popover|（原文連結）]] {{url>http://www.lotar.altervista.org/dokuwiki/wiki/plugin/bootswrapper/popover ,700px}}++ * 測試 Bootstrap Wrapper popover * Dismissible Popover 預覽模式中無效？← 對，要儲存出去才可以 * 試著 include 其他頁面時不行：看一下本站更新紀錄錯誤訊息：Bootstrap Wrapper - Malformed tag (看一下本站更新紀錄看一下本站更新紀錄\\ ↑可以了！我要哭了！感謝　神！<<大哭>> * 若能改 popover 的寬度就更好了 * 似乎是改 ''bootstrap.min.css'' 的 .popover { max-width:500px; } 這邊 缺點： * 語法繁複麻煩 * DW 模板不支援 Bootstrap 時就無用武之地 ===== 自助 ===== 實在受夠 DW 欠缺一個真正的 popup plugin 了！ 用 HTML 做，也不難啊！（但看來至少一定要附 JS） - ☞ [[https://www.w3schools.com/howto/howto_js_popup.asp|How To Create Popups]] - 然後，透過 [[doku>plugin:inlinejs]]，把範例 HTML + CSS + JS 放到任何一個 DW 頁面上，++也能順利呈現啊！|
khíeu 箍 圈起來
/* Popup container */ .popup { position: relative; display: inline-block; cursor: pointer; } /* The actual popup (appears on top) */ .popup .popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Popup arrow */ .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class when clicking on the popup container (hide and show the popup) */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} } // When the user clicks on
, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } ++ * 而且我測試過了，popup 內的文字，也可以打入自訂的文字及任何 HTML 元素 那麼，就試試把它[[..:dev:plugin:popup|做成 plugin]]，大幅簡化輸入？ * 當然，比較簡單的方法，似乎是把 JS 放到 conf/userscript.js 中就可以用了(([[doku>devel:javascript]])) {{tag>todo}}