jquery dialog弹出框居中怎么设置?具体方法详解

你知道jquery dialog弹出框居中应该要怎样设置吗?如何才能够实现呢?下面要给大家介绍到的就是这个方面的内容,一起来看看具体方法吧。

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弹出框居中设置

以上的步骤你都清楚了吗?希望可以对你有所帮助。

更多相关知识,以及java编程常见问题请继续通过奇Q工具网来进行了解吧。

推荐阅读:

jquery和ajax的关系是什么样的?

jquery和vue的区别是什么?区别介绍

jquery ajax请求,使用jquery发送ajax请求怎么编写?