Popup [Ciang Brides 黃金城]

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== Popup ======
===== plugin =====
  * ++embedover|{{url>https://www.dokuwiki.org/plugin:embedover}}++
  * [[doku>plugin:abbr|abbr]]\\ <abbr>TW [台灣]</abbr> <abbr>Taiwan Independence (TI)</abbr>
  * [[doku>plugin:annotate|annotate]]\\ <anno:1>諸夏</anno> <@anno:1>東亞諸國</@anno>
    * 預覽時似乎看不到效果
  * [[doku>plugin:autotooltip|autotooltip]]\\ <autott><content>本週主題</content><tip>感謝　神、聖靈吧</tip><title>本週主題</title></autott>
    * 預覽時似乎看不到效果
===== 試用 =====
==== 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}}++
  * <todo #ghsrobert:2016-06-15>測試 Bootstrap Wrapper popover</todo>
    * <popover html="true" title="**Dismissible** popover" content="And here's some amazing content. \\ **It's very engaging**. \\ Right?"><btn type="success">Dismissible Popover</btn></popover> 預覽模式中無效？← 對，要儲存出去才可以
    * 試著 include 其他頁面時不行：<code html><popover html="true" title="**測試**引用其他頁面" content="{{page>this:changelog}}">看一下本站更新紀錄</popover></code>錯誤訊息：<code>Bootstrap Wrapper - Malformed tag (<popover html="true" title="**測試**引用其他頁面" content="{{page\>). Please check your code!</code>原因當然是因為 ''%%{{page%%**>**...}}'' 語法裡面的 ''>'' 導致 popover 的 tag 提早結束了。/-得提 bug 了-/← <wrap hi>解決了！</wrap>↓
      * 如果把 ''>'' 用 entity 取代呢？<code html><popover html="true" title="**測試**引用其他頁面" content="{{page&gt;this:changelog}}" trigger="focus"><btn type="success">看一下本站更新紀錄</btn></popover></code><popover html="true" title="**測試**引用其他頁面" content="{{page&gt;this:changelog}}" trigger="focus"><btn type="success">看一下本站更新紀錄</btn></popover>\\ ↑可以了！我要哭了！感謝　神！<<大哭>>
  * <todo>若能改 popover 的寬度就更好了</todo>
    * 似乎是改 ''bootstrap.min.css'' 的 <code css>
.popover {
	max-width:500px;
}
</code>這邊

缺點：
  * 語法繁複麻煩
  * 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 頁面上，++也能順利呈現啊！|<html>
<div class="popup" onclick="myFunction()">khíeu
  <span class="popuptext" id="myPopup">箍 <span class="wrap_zh">圈起來</span></span>
</div>
</html>

<CSS>
/* 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 ;}
}
</CSS>

<JS>
// When the user clicks on <div>, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</JS>++
    * 而且我測試過了，popup 內的文字，也可以打入自訂的文字及任何 HTML 元素

那麼，就試試把它[[..:dev:plugin:popup|做成 plugin]]，大幅簡化輸入？
  * 當然，比較簡單的方法，似乎是把 JS 放到 conf/userscript.js 中就可以用了(([[doku>devel:javascript]])) 

{{tag>todo}}