HTML点击图片出现边框,简单的jQuery实现点击图片出现弹框【原创】

这周学习了jquery的基本知识，DOM、事件、动画，刚好有个弹框效果要做。

实现功能是要求：在页面上点击图片“在线报名”，之后，屏幕变黑，半透明，正中间弹出一个对话框，里面包括报名信息，

用表单实现，右上角需要一个“关闭”。

首先，要确定html的布局，使用div放在

内部，代码如下：

报   名

【关闭】

姓  名：

联系方式：

备  注：

之后，设置css样式：

body{

width: 100%;

height: 100%;

position: relative;

}/*弹框效果*/

#dialog-bg{

position:absolute;

top: 0;

left: 0;

z-index: 10000;

width: 100%;

height: 100%;

background-color:#000000;

opacity: 0.5;

filter:Alpha(opacity=50);/*透明度兼容*/

_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

/*ie6中利用position和上面的这条语句，可以实现像fixed的效果*/display: none;

}

.dialog-box{

position: absolute;

z-index: 20000;

left: 50%;

top: 50%;

margin-left: -161px;

margin-top: -151px;

padding-left: 20px;