弹出可拖动DIV,CSS圆角

拖动效果不是很好,明显有拖拉现象,不过暂时没有找到好的方法解决。。。

重点放在CSS的圆角,不过只有3个像素高,暂时没有弄出来更高的显示效果,多了太难看
一直在研究遮挡层的代码简化,不过最后也就到了现在这种程度
入门级的练习代码

弹出可拖动DIV,CSS圆角_第1张图片

<!--用t这个div控制整个遮挡层是否可见-->
<div id="t" style="display:none;">
<!--单独的半透明遮挡层,通过iframe遮挡页面中的select元素-->
<div style="z-index:98;" class="al" id="back_div">
  <iframe frameborder="0" scrolling="no" width="100%" height="100%" class="al2"></iframe>
</div>
<!--我们希望看到的弹出内容,同样是绝对定位方式,层级在遮挡层上方-->
<DIV style="width:500px; position:absolute;top:25%; left:30%; z-index:999;" id="t_div">
<U class="f1"></U><U class="f2"></U><U class="f3"></U>
<div class="d_top" onMouseDown="moveEvent(event,'t_div')">
<span>测试弹出div</span>
<!--这里可以换成div,因为FF下面a的href如果用#,而且没有对应锚点会导致页面的刷新-->
<a href="javascript:" onClick="cl('t')">×</a>
</div>
<DIV class="d_body" >
测试CSS圆角
</DIV>
<div class="d_foot"></div>
<U class="f3"></U><U class="f2"></U><U class="f1"></U>
</DIV>
</div>

你可能感兴趣的:(html,css)