差異處

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

--- dokuwiki:syntax:popup [2020/03/21 19:58]
ghsrobert [自助]
+++ dokuwiki:syntax:popup [2020/03/21 20:03] (目前版本)
ghsrobert [自助] 放入測試 CSS + JS 範例
@@ 行 39: / 行 39: @@
 用 HTML 做，也不難啊！（但看來至少一定要附 JS）
   - ☞ [[https://www.w3schools.com/howto/howto_js_popup.asp|How To Create Popups]]
-  - 然後，透過 [[doku>plugin:inlinejs]]，把範例 HTML + CSS + JS 放到任何一個 DW 頁面上，也能順利呈現啊！
+  - 然後，透過 [[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 元素