https://new.pvzhe.wiki/w/%E5%BE%AE%E4%BB%B6:Modal?action=history&feed=atom 2026-07-26T19:29:16Z 本wiki上该页面的版本历史 MediaWiki 1.43.6 https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:Modal&diff=14242&oldid=prev 2026-07-21T02:31:01Z

<p>创建页面，内容为“&lt;includeonly&gt; &lt;button class=&quot;modal-trigger&quot; style=&quot; padding:8px 20px; background:&lt;!--{$btnColor|default:&#039;#4CAF50&#039;}--&gt;; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; transition:background 0.3s; &quot;&gt;&lt;!--{$btnText|default:&#039;打开&#039;}--&gt;&lt;/button&gt; &lt;div class=&quot;modal-overlay&quot; style=&quot; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:99999; d…”</p> <p><b>新页面</b></p><div>&lt;includeonly&gt;<br /> &lt;button class=&quot;modal-trigger&quot; style=&quot;<br /> padding:8px 20px;<br /> background:&lt;!--{$btnColor|default:&#039;#4CAF50&#039;}--&gt;;<br /> color:#fff;<br /> border:none;<br /> border-radius:6px;<br /> cursor:pointer;<br /> font-size:14px;<br /> transition:background 0.3s;<br /> &quot;&gt;&lt;!--{$btnText|default:&#039;打开&#039;}--&gt;&lt;/button&gt;<br /> &lt;div class=&quot;modal-overlay&quot; style=&quot;<br /> position:fixed;<br /> top:0;<br /> left:0;<br /> width:100%;<br /> height:100%;<br /> background:rgba(0,0,0,0.5);<br /> backdrop-filter:blur(4px);<br /> z-index:99999;<br /> display:none;<br /> align-items:center;<br /> justify-content:center;<br /> &quot;&gt;<br /> &lt;div class=&quot;modal-box&quot; style=&quot;<br /> background:#fff;<br /> border-radius:16px;<br /> padding:24px;<br /> max-width:&lt;!--{$width|default:&#039;500&#039;}--&gt;px;<br /> width:90%;<br /> max-height:80vh;<br /> overflow-y:auto;<br /> box-shadow:0 8px 40px rgba(0,0,0,0.3);<br /> animation:modalFadeIn 0.3s ease;<br /> &quot;&gt;<br /> &lt;div style=&quot;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;&quot;&gt;<br /> &lt;h3 style=&quot;margin:0;font-size:18px;&quot;&gt;&lt;!--{$title|default:&#039;提示&#039;}--&gt;&lt;/h3&gt;<br /> &lt;button class=&quot;modal-close&quot; style=&quot;<br /> background:transparent;<br /> border:none;<br /> font-size:24px;<br /> cursor:pointer;<br /> color:#999;<br /> padding:0 4px;<br /> &quot;&gt;×&lt;/button&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;modal-body&quot;&gt;&lt;!--{$content}--&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;style&gt;<br /> @keyframes modalFadeIn {<br /> from { opacity:0; transform:scale(0.9); }<br /> to { opacity:1; transform:scale(1); }<br /> }<br /> &lt;/style&gt;<br /> &lt;script&gt;<br /> (function() {<br /> const trigger = document.currentScript.parentElement.querySelector(&#039;.modal-trigger&#039;);<br /> const overlay = document.currentScript.parentElement.querySelector(&#039;.modal-overlay&#039;);<br /> const closeBtn = overlay.querySelector(&#039;.modal-close&#039;);<br /> if (!trigger || !overlay) return;<br /> <br /> function openModal() { overlay.style.display = &#039;flex&#039;; document.body.style.overflow = &#039;hidden&#039;; }<br /> function closeModal() { overlay.style.display = &#039;none&#039;; document.body.style.overflow = &#039;&#039;; }<br /> <br /> trigger.addEventListener(&#039;click&#039;, openModal);<br /> closeBtn.addEventListener(&#039;click&#039;, closeModal);<br /> overlay.addEventListener(&#039;click&#039;, (e) =&gt; {<br /> if (e.target === overlay) closeModal();<br /> });<br /> document.addEventListener(&#039;keydown&#039;, (e) =&gt; {<br /> if (e.key === &#039;Escape&#039; &amp;&amp; overlay.style.display === &#039;flex&#039;) closeModal();<br /> });<br /> })();<br /> &lt;/script&gt;<br /> &lt;/includeonly&gt;</div>

愤怒的郎朗