jquery 弹窗-CSDN博客

本文链接：https://blog.csdn.net/Qfoom/article/details/112917817

这段代码展示了如何使用HTML、CSS和JavaScript实现一个点击按钮弹出选择窗口的功能。当用户点击'点击这里实现弹窗'按钮时，会显示一个包含学期选择的弹窗，并伴有半透明黑色背景蒙版。关闭弹窗则通过点击'x'标记实现。

摘要由CSDN通过智能技术生成

https://www.jq22.com/webqd5955

html

<div>这是一个主界面</div><br>
<button id="btn">点击这里实现弹窗</button>
<div id="choiceWindow">
    <label id="x" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label>
    <form>
        <label>请选择开课学期：</label>&nbsp; &nbsp; &nbsp;
        <select>
                    <option value="2017-2018-1">2017-2018-1</option>
                    <option value="2017-2018-2">2017-2018-2</option>
                </select><br><br>

    </form>
</div>
<div id="backGround"></div>

 #choiceWindow {
	display:none;
	position:absolute;
	top:25%;
	left:25%;
	width:30%;
	height:55%;
	padding:20px;
	border:3px solid #ccc;
	background-color:white;
	z-index:2;
	overflow:auto;
}
#backGround {
	display:none;
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:1100px;
	background-color:black;
	z-index:1;
	-moz-opacity:0.8;
	opacity:.80;
	filter:alpha(opacity=88);
}
#x:hover {
	cursor:pointer;
	color:rgb(55,198,192);
}

$(document).ready(function() {
    $("#btn").click(function() {
        $("#choiceWindow").slideDown(300);
        $("#backGround").show();

    });

    $("#x").click(function() {
        $("#choiceWindow").slideUp(300);
        $("#backGround").hide();
    })

});