关于js如何实现一个悬浮窗口的问题

我希望。在我点击回复后,弹出一个DIV 。弹出DIV之后。网页变成灰色透明。除弹出的 DIV 之外其他不可用。让提交回复后。弹出的DIV消失。并其他可用。
大概效果图就像百度登陆这样的。。。Image

阅读 10k
6 个回答

1.灰色半透明是一个遮罩层,设置颜色和不透明度,设置点击事件

$('#mask').on("click", function(){ 
    return false; 
    });

//还要停止冒泡啥的

2.悬浮窗也是一个divdiv要有高度和宽度,里面在设计一个表单
设置一定的z-index,计算div居中,
$('#top-div').css({left: (pageX-div.width())/2, top: (pageY-div.height())/2});
大概就是这个样子了。

给楼主推荐一个很好用的弹窗插件:贤心-Layer,这个插件支持自定义样式,用起来很方便。

jQuery.blockui.js

楼主看看李炎恢的js视频第97讲 可以实现楼主要的效果 不过是原生js写的

可以参考下bootstrap中关于模态框的这个插件modal.js

不考虑兼容性的话<dialog>标签是不错的选择 Dialog element

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题