jquery实现弹出div,始终显示在屏幕正中间的简单实例

以下是一个使用jQuery实现弹出div，并使其始终显示在屏幕正中间的简单实例。这个实例假设你已经有了一个HTML元素（比如一个div），你想通过jQuery来控制它的显示位置。

首先，确保你的HTML文件中已经引入了jQuery库。

HTML部分:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出居中Div</title>
<style>
    #myDiv {
        display: none; /* 默认不显示 */
        position: fixed; /* 固定定位 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 偏移自身宽高的一半，以实现居中 */
        padding: 20px;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        z-index: 1000; /* 确保它位于其他内容之上 */
    }
</style>
</head>
<body>

<button id="showDivBtn">显示Div</button>
<div id="myDiv">这是一个居中显示的Div!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#showDivBtn").click(function(){
        $("#myDiv").fadeIn(500); // 使用fadeIn方法淡入显示div，持续时间为500毫秒
    });

    // 如果需要隐藏div，可以添加以下代码
    /*
    $("#hideDivBtn").click(function(){
        $("#myDiv").fadeOut(500); // 使用fadeOut方法淡出隐藏div，持续时间为500毫秒
    });
    */
});
</script>

</body>
</html>

在这个例子中，`#myDiv` 是你想要弹出的div，它默认是隐藏的（通过CSS的`display: none;`）。我们使用了CSS的`position: fixed;`来确保div相对于浏览器窗口进行定位，`top`、`left`和`transform`属性共同作用，使div的中心与浏览器窗口的中心对齐。

当用户点击ID为`showDivBtn`的按钮时，jQuery的`fadeIn`方法被调用，这将使`#myDiv`以淡入的方式显示出来，并且显示时间为500毫秒。

如果你还需要一个按钮来隐藏这个div，可以取消注释相关的`#hideDivBtn`的点击事件处理代码，并相应地添加一个按钮元素到你的HTML中。