跳转到相应的页面。html点击弹出下拉列表选择后跳转到相应的页面。超文本标记语言，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言（或超文本标签语言）的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。首先根据需求我们需要一个按钮，一个弹出窗口层；\x0d\x0aOK，废话不多说；\x0d\x0a按钮就用一个基本的：\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分：\x0d\x0a首先需要引入一个JS库，版本自己定义：\x0d\x0a然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a})
回答于 2022-11-16
<div class="mask-box"></div>
<div class="dialog-box">
弹窗内容
</div>
通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为弹窗容器，里面写弹窗的内容。
通过控制样式，切换 display:block display: none实现点击出现、点击关闭弹窗。
.mask-box{
/* 切换 display:block display: none*/
position: fixed
left: 0
right: 0
top: 0
bottom: 0
background:rgba(0,0,0,0.7)
z-index: 98
}
.dialog-box{
/* 切换 display:block display: none*/
position: fixed
left: 50%
top: 50%
transform: translate(-50%,-50%)
width: 300px
height: 200px
background: #fff
/* 按实际情况 设置z-index */
z-index: 98
}
