jquery Dialog 弹出框居中怎么设置

 时间:2024-10-13 08:43:48

1、首先我们的代码里先引入jquery脚本库,和Jquery UI库。

jquery Dialog 弹出框居中怎么设置

2、html里就需要一个简单的div就行了,这个作为弹出框的内容。

jquery Dialog 弹出框居中怎么设置

3、要生成Dialog弹出框,直接调用dialog方法就行了,调用的对象就是刚才html里的div。

jquery Dialog 弹出框居中怎么设置

4、运行页面,我们可以看到现在的弹出框,已经正常显示出来了,而且可以看到,在默认情况下,这个弹出框就已经居中了。这是因为弹出框默认的position属性就是设置居中的,是相对于window整个窗口来居中的。

jquery Dialog 弹出框居中怎么设置

5、如果你要设置让其相对于某个容器居中,而不是相对整个窗口来居中,那么我们可以设置position属性里的of参数,将其设置为对刂茗岚羟应的容器就行了。position: { my: "center", at: "center", of: "#bd_container" },bd_container就是一个div容器的id,我们让弹出框相对这个div居中。

jquery Dialog 弹出框居中怎么设置

6、bd_container这个div设置一下样式,让其宽为600px,高为300px。

jquery Dialog 弹出框居中怎么设置

7、重新运行页面,可以看到现在的弹出框对于整个页面是不居中的。

jquery Dialog 弹出框居中怎么设置

8、但对于它的父窗口div,它是居中的。

jquery Dialog 弹出框居中怎么设置
  • Axure RP如何使用复制粘贴置入图像
  • layer设置弹出框大小;layer弹出框宽、高设置
  • 如何使用PyCharm下载模块
  • Vscode切换行注释步骤介绍
  • Sublime如何快速进行代码折叠
  • 热门搜索
    硬度不够怎么办 阿玛尼的手表怎么样 小儿便秘怎么办 我的世界怎么飞行 几分之几怎么打出来 是怎么回事 ipod怎么下载歌曲 我的世界怎么附魔武器 视频怎么旋转 容声冰箱怎么样