这个方法须要结合html、css和javascript三种措辞，即web三件套全得用上。该方法的事理便是将本来的窗口的style中display设置为none，当点击按钮之后，设置为block，并为该窗口绑定位置，实例代码如下：
<div id="ck1"><p style='text-align:center;line-height:80px;'>这个窗口，可以说是自己设计的了，可以在这里添加其它的标签和功能</p></div><button class='btn btn-default' onclick='show2()'>点击弹出自己设计的小窗口</button><style> #ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}</style><script> function show2(){ document.getElementById("ck1").style.display = "block"; }</script>
HTML+CSS+JS自主设计弹出窗口的方法，在线编辑器
（图片来自网络侵删）
这个自主设计的方法中，除了display属性的设置之外，另一个关键点在于z-index值的设置，html元素的排列堆叠，不仅有水平方向、竖直方向，还有深度方向，就像立体的直角坐标系当中，不仅有x轴、y轴，还有z轴，即z-index的设置可以修正div或html元素的z轴位置。
HTML+CSS+JS在线编辑器可以参考原文原文地址：html怎么弹出一个小窗口，自主设计方法，在线编辑器 - HTML教程
