HTML+CSS+JS自主设计弹出窗口的办法，在线编辑器
<h2 style="color: black; text-align: left; margin-bottom: 10px;">html怎么弹出一个小窗口</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">html弹出一个小窗口的<span style="color: black;">办法</span>可能有<span style="color: black;">非常多</span>，就<span style="color: black;">例如</span>本站（<a style="color: black;">笨鸟<span style="color: black;">工具</span>-璞玉天成，大器晚成</a>）的导航栏点击之后会有一个小窗口（小页面）弹出，<span style="color: black;">而后</span><span style="color: black;">文案</span>页面的底部有两个小图标，当鼠标悬放在上面的时候，<span style="color: black;">亦</span><span style="color: black;">能够</span>弹出一个小窗口，<span style="color: black;">而后</span>点击下方实例代码的试一试按钮，<span style="color: black;">亦</span><span style="color: black;">能够</span>弹出一个小窗口，是本站<span style="color: black;">供给</span>的HTML+css+javascript的在线编辑器。<span style="color: black;">这儿</span>介绍的一简单的<span style="color: black;">办法</span>和一种自主设计的<span style="color: black;">办法</span>，不<span style="color: black;">必须</span>很<span style="color: black;">繁杂</span>的程序设计，<span style="color: black;">亦</span>不<span style="color: black;">必须</span>框架，用javascript和css就<span style="color: black;">能够</span>：</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">自主设计html弹出小窗口的<span style="color: black;">办法</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个<span style="color: black;">办法</span><span style="color: black;">必须</span>结合html、css和javascript三种语言，即web三件套全得用上。该<span style="color: black;">办法</span>的原理<span style="color: black;">便是</span>将本来的窗口的style中display设置为none，当点击按钮之后，设置为block，并为该窗口绑定位置，实例代码如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"ck1"</span><span style="color: black;">><</span><span style="color: black;">p</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">text-align:center;line-height:80px;</span><span style="color: black;">></span>这个窗口，<span style="color: black;">能够</span>说是自己设计的了，<span style="color: black;">能够</span>在<span style="color: black;">这儿</span>添加其它的标签和功能<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">button</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">btn btn-default</span> <span style="color: black;">onclick</span><span style="color: black;">=</span><span style="color: black;">show2()</span><span style="color: black;">></span>点击弹出自己设计的小窗口<span style="color: black;"></</span><span style="color: black;">button</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;">#</span><span style="color: black;">ck1</span><span style="color: black;">{</span><span style="color: black;">display</span><span style="color: black;">:</span><span style="color: black;">none</span><span style="color: black;">;</span><span style="color: black;">position</span><span style="color: black;">:</span><span style="color: black;">fixed</span><span style="color: black;">;</span><span style="color: black;">top</span><span style="color: black;">:</span><span style="color: black;">20</span><span style="color: black;">%</span><span style="color: black;">;</span><span style="color: black;">left</span><span style="color: black;">:</span><span style="color: black;">20</span><span style="color: black;">%</span><span style="color: black;">;</span><span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span><span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">80</span><span style="color: black;">px</span><span style="color: black;">;</span><span style="color: black;">z-index</span><span style="color: black;">:</span><span style="color: black;">9999</span><span style="color: black;">;</span><span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span><span style="color: black;">skyblue</span><span style="color: black;">;</span><span style="color: black;">border-radius</span><span style="color: black;">:</span><span style="color: black;">5</span><span style="color: black;">px</span><span style="color: black;">;}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">script</span><span style="color: black;">></span>
<span style="color: black;">function</span> <span style="color: black;">show2</span><span style="color: black;">(){</span>
<span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementById</span><span style="color: black;">(</span><span style="color: black;">"ck1"</span><span style="color: black;">).</span><span style="color: black;">style</span><span style="color: black;">.</span><span style="color: black;">display</span> <span style="color: black;">=</span> <span style="color: black;">"block"</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">script</span><span style="color: black;">></span>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">代码解析</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个自主设计的<span style="color: black;">办法</span>中，除了display属性的设置之外，另一个<span style="color: black;">重要</span>点在于z-index值的设置，html元素的<span style="color: black;">摆列</span>堆叠，不仅有水平方向、竖直方向，还有深度方向，就像立体的直角坐标系<span style="color: black;">其中</span>，不仅有x轴、y轴，还有z轴，即z-index的设置<span style="color: black;">能够</span>修改div或html元素的z轴位置。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">HTML+CSS+JS在线编辑器<span style="color: black;">能够</span>参考原文</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">原文<span style="color: black;">位置</span>：<a style="color: black;">html怎么弹出一个小窗口，自主设计<span style="color: black;">办法</span>，在线编辑器 - HTML教程</a></p>
这夸赞甜到心里，让我感觉温暖无比。 我完全赞同你的观点，思考很有深度。 太棒了、厉害、为你打call、点赞、非常精彩等。 论坛外链网http://www.fok120.com/
页:
[1]