基本弹出图层应满足以下要求:
1.点击按钮/链接触发弹出层，弹出层要有半透明的蒙版层；
2.单击弹出层的关闭按钮、取消按钮或掩膜层将关闭隐藏的弹出层；
3.您也可以使用esc键关闭弹出图层；
4.它反应灵敏，兼容现代主流浏览器。
超文本标记语言
1.首先，我们在页面上放置一个链接来触发弹出层，或者它可以是一个按钮。注意我们为它设置了一个data-show-layer属性，对应的是弹出层的id，也就是说弹出层是通过data-show-layer关联的。
2.显然，与上述链接相关联的弹出层的id是hw-layer。嗯，选择我们准备弹出层hw-layer的html代码。
3.我们将使用css来控制弹出层的最外层，也就是遮罩层。hw-overlay，这是一个半透明层，用于将弹出层与页面的主要内容分开。r然后，在。hw-layer-wrap主体层，我们可以设置弹出层的内容。当然，内容由你决定。本文弹出的内容层是一个确认对话框，类似于窗口的confirm()。内容使用自举scol-*网格布局和字体图标。其实最重要的是需要一个蒙版层和一个正文层，内容可以根据项目需要定制，因为可能是表格，也可能是纯文字描述。
半铸钢?钢性铸铁(castsemi-steel)
1.css也是很关键的一部分。让先设置蒙版层。默认情况下，它应该是不可见的，位置固定，并且覆盖整个页面。它仍然是半透明的。我们在这里设置背景黑色和透明度0.3，比如background-color:rgba(0，0，0，0.3)。然后是主层。hw-layer-wrap，我们设置它的宽度并计算它的位置。我们可以预设宽度值。因为高度的内容是不确定的，我们不这里不需要设置特定的值。我们会在后面的js部分处理高度，然后设置居中和边框阴影的效果。关于水平和垂直对中的设置，请参考helloweba的文章:如何水平和垂直居中div。弹出层中的内容样式可以自由设置，最终解决了使用媒体查询在小屏幕中央设置弹出层的问题。
2.我们使用jquery来处理触发弹出层和关闭弹出层的效果，所以需要预加载jquery库。showlayer(id)是一个自定义函数，用于显示弹出层。当您单击按钮或链接来调用此showlayer时。(id)函数，会逐渐显示效果，计算弹出层的高度位移距离，使弹出的主层在水平和垂直方向居中。hidelayer()的作用是隐藏弹出层，可以通过fadeout()或者hide()来实现。最后，添加触发掩膜图层时关闭弹出图层的代码和使用esc按钮时关闭弹出图层的代码。
3.其实至此，一个基本的弹出层效果已经做好了。我们这里只是做一个基本的弹出层，你也可以继续扩展代码。我们见过很多弹出层插件，很多都是动态直接操作dom的，也就是先通过js代码创建
常用的js选择器有getelementbyid()、getelementsbyname()、getelementsbytagname()、getelementsbyclassname()、queryselector()。
答:返回对第一个具有指定id的对象的引用。如果要在文档中查找特定的元素，最有效的方法是的返回元素的名称属性是文档中的名称值。因为name属性值不是唯一的，所以查询结果可能返回数组而不是元素。
·返回文档中指定标签的元素。
·返回文档中指定类名的所有元素。
·queryselector()返回文档中匹配指定css选择器的第一个元素。
·queryselectorall()返回文档中匹配指定css选择器的第一个元素。
第二，jquery选择器#
内容
基本的选择器包括id选择器、类选择器、标签选择器和通用选择器，以及事件的添加。添加方法如下:
$(...).事件名称(function(){})
属性样式包括:
$(...).css(#34边框#34，#341像素纯红#34)
$(...).css({...})
$(...).css(#34border#34)
$(...).attr(属性名称，值)
$(...).html()innerhtml
$(...).text()内部文本
$(...).val()值值
$(...).addclass()增加。
$(...).removeclass()删除
$(...).toggleclass()开关**
选择器的详细用法:#
属性选择器的补充:
例如，查找当前类下所有具有data-scrollto属性的元素。右侧导航条。
$(#39.rightnav-bar[data-scrollto]#39)
varscroll$(#39[data-scrollto]#39)//当只有要查找的元素包含data-scrollto属性时，也可以使用此方法。
//vartabindex$(#a[data-types#39support#39]#34)。索引()
