dokuwiki:syntax:popup

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
dokuwiki:syntax:popup [2019/03/15 12:33]
ghsrobert [plugin] 一口氣找到 3 個可用的新 plugin！ 		dokuwiki:syntax:popup [2020/03/21 20:03] (目前版本)
ghsrobert [自助] 放入測試 CSS + JS 範例
行 29: 行 29:
 } }
 </code>這邊 </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()">khí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}} {{tag>todo}}
  • 上一次變更: 2019/03/15 12:33
  • 由 ghsrobert