使用Javascript和HTML显示弹出窗口

我想在用户单击按钮时显示一个弹出窗口

以下是html代码：

函数showPopup（）{
$（“#弹出”）。在（''）之前；
var popupH=$（“#popUp”）.height（）；
var popuww=$（“#popUp”）.width（）；
$（“#popUp”）.css（“页边空白顶部”），“-”（popupH/240）
“px”）；
$（“#popUp”）.css（“左边距”，“popupH/2”px”）；
$（“#灰背”）.css（'opacity'，0）.fadeTo（300，0.5，function（）{
$（“弹出窗口”）.fadeIn（500）；
});
}
函数hidePopup（）{
$（“#灰背”）.fadeOut（'fast'，function（）{
$（this.remove（））
});
$（“#弹出”）.fadeOut（'fast'，function（）{
$（this.hide（））
});
}

弹出
你好!

尝试（无jquery）

toggle=q=>document.querySelector（q.classList.toggle（'hide'）
body{margin:0；padding:0；}
.btn{
填充：10px；
背景：#BADA55；
边界半径：5px；
光标：指针
}
Poppubg{
位置：绝对位置；
排名：0；
左：0；
显示器：flex；
最小高度：100vh；
宽度：100vw；
证明内容：中心；
对齐项目：居中；
背景：rgba（255,0,0,0.5）
}
.弹出窗口{
宽度：100px；
最小高度：200px；
边框：1px纯黑；
背景：#88f；
利润率：40像素；
}
.hide{display:none；}
一些内容
弹出窗口
我的弹出窗口
尝试（无jquery）


toggle=q=>document.querySelector（q.classList.toggle（'hide'）
body{margin:0；padding:0；}
.btn{
填充：10px；
背景：#BADA55；
边界半径：5px；
光标：指针
}
Poppubg{
位置：绝对位置；
排名：0；
左：0；
显示器：flex；
最小高度：100vh；
宽度：100vw；
证明内容：中心；
对齐项目：居中；
背景：rgba（255,0,0,0.5）
}
.弹出窗口{
宽度：100px；
最小高度：200px；
边框：1px纯黑；
背景：#88f；
利润率：40像素；
}
.hide{display:none；}
一些内容
弹出窗口
我的弹出窗口
由于其语法原因，以下内容将不起作用：

$("#popUp").css("margin-top", "-" (popupH / 2 40) "px");
$("#popUp").css("margin-left", "-" popupH / 2 "px");

应该是这样的：

$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#popUp").css("margin-left", "-" + popupH / 2 + "px");

这就是为什么

$("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
  $("#popUp").fadeIn(500);
});

从未被调用。

（注意
+
）

使用我自己的CSS的工作示例：


函数showPopup（）{
$（“#弹出”）。在（''）之前；
var popupH=$（“#popUp”）.height（）；
var popuww=$（“#popUp”）.width（）；
//$（“#popUp”）.css（“页边距顶部”，“-”+（popupH/2+40）+“px”）；
//$（“#popUp”）.css（“左边距”，“-”+popupH/2+“px”）；
$（“#灰背”）.css（'opacity'，0）.fadeTo（300，0.5，function（）{
$（“弹出窗口”）.fadeIn（500）；
});
}
函数hidePopup（）{
$（“#灰背”）.fadeOut（'fast'，function（）{
$（this.remove（））
});
$（“#弹出”）.fadeOut（'fast'，function（）{
$（this.hide（））
});
}
#弹出窗口{
显示：无；
宽度：200px；
高度：200px；
z指数：100；
位置：绝对位置；
排名：0；
左：0；
背景色：#fff；
}
#灰背{
位置：绝对位置；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
背景色：rgba（0,0,0,4）；
z指数：10；
不透明度：0；
}

弹出
你好!


由于其语法原因，以下内容将不起作用：

$("#popUp").css("margin-top", "-" (popupH / 2 40) "px");
$("#popUp").css("margin-left", "-" popupH / 2 "px");

应该是这样的：

$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#popUp").css("margin-left", "-" + popupH / 2 + "px");

这就是为什么

$("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
  $("#popUp").fadeIn(500);
});

从未被调用。

（注意
+
）

使用我自己的CSS的工作示例：


函数showPopup（）{
$（“#弹出”）。在（''）之前；
var popupH=$（“#popUp”）.height（）；
var popuww=$（“#popUp”）.width（）；
//$（“#popUp”）.css（“页边距顶部”，“-”+（popupH/2+40）+“px”）；
//$（“#popUp”）.css（“左边距”，“-”+popupH/2+“px”）；
$（“#灰背”）.css（'opacity'，0）.fadeTo（300，0.5，function（）{
$（“弹出窗口”）.fadeIn（500）；
});
}
函数hidePopup（）{
$（“#灰背”）.fadeOut（'fast'，function（）{
$（this.remove（））
});
$（“#弹出”）.fadeOut（'fast'，function（）{
$（this.hide（））
});
}
#弹出窗口{
显示：无；
宽度：200px；
高度：200px；
z指数：100；
位置：绝对位置；
排名：0；
左：0；
背景色：#fff；
}
#灰背{
位置：绝对位置；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
背景色：rgba（0,0,0,4）；
z指数：10；
不透明度：0；
}

弹出
你好!


我只想指出，
标签是可以使用的，尽管目前支持它的浏览器是Chrome和Opera，还有一些用于移动设备的浏览器

在我看来，
将成为“弹出窗口”和“模式窗口”的标准

参考：





我只想指出，
标签是可以使用的，尽管目前支持它的浏览器是Chrome和Opera，以及一些用于移动设备的浏览器

在我看来，
将成为“弹出窗口”和“模式窗口”的标准

参考：





只需修复语法错误，弹出窗口即可工作：

$（“#popUp”）.css（“页边空白顶部”，“-”+（popupH/2+40）+“px”）；
$（“#popUp”）.css（“左边距”，“-”+popupH/2+“px”）；
只需修复语法错误，弹出窗口即可工作：

$（“#popUp”）.css（“页边空白顶部”，“-”+（popupH/2+40）+“px”）；
$（“#popUp”）.css（“左边距”，“-”+popupH/2+“px”）；
您至少有语法错误<代码>“-”（popupH/2 40）“px”
无法工作，因为我有此错误。我直到现在才看到它，因为我的代码的另一部分是阻塞错误。旁注：您应该使用更普遍接受的internet图像格式，如jpeg或png，位图非常大且不实用。您至少有语法错误<代码>“-”（popupH/2 40）“px”

无法工作，因为我有此错误。我直到现在才看到它，因为我的另一部分代码是阻塞错误。旁注：你应该使用更普遍接受的互联网图像格式，如jpeg或png，位图非常大，不实用。我认为如果