Bootstrap编写弹出窗

环境

需要引入的环境：
1.引入jquery-3.2.1.min.js
2.引入bootstrap.js

HTML代码的实现

<!-- 添加参会人员弹窗 -->
	<div class="modal fade " id="toSensor" tabindex="-1" role="dialog" style="margin-left:10%;width:80%;hight:100%;background-color:rgba(0,0,255,0);">
		<div style="width:100%;height:85%;background-color:#ffffff;">
			<div style="width:100%;height:90%;margin-top: 5%；">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">X</button>
					<div >参会预选人员</div>
				</div>
				<div style="width:100%;height:10%;">
					<div style="margin-left: 5%;">
						老师编号<input id="teacherid" type="text" />
						老师名称<input id="teachername" type="text" />
						<button onclick="searchTeacher()">搜索</button>
					</div>
					
				</div>
				<div style="width:100%;height:80%;">
					<div id="monitorList02"  style="text-align:center; width: 100%;overflow-y: auto;height:400px; cellpadding: 50; cellspacing: 50;word-wrap:break-word; word-break:break-all;font-size:16px; float:left;">
						
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" id="add" data-dismiss="modal" onclick="addSensors();">确定</button>
					
					<button class="btn btn-primary" id="off" data-dismiss="modal" >取消</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 添加参会人员弹窗结束 -->

JS代码

//老师的点击事件
var dianji =function(){
	//添加参会人员---》显示
	$("#toSensor").modal({backdrop:"static"}).modal('show');
	var teacherid = $("#teacherid").val();
	var teachername = $("#teachername").val();
	display("","");	
		

}

var display =function(teacherid,teachername){
	$.ajax({
		url:"selectUserRole",
		type:"post",
		dataType:"json",
		data:{
			"role":0,
			"userid":teacherid,
			"username":teachername,
			"pageIndex":0,
			"pageEnd":100
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			$("#monitorList02").html("<tr><td width=8%>选择</td><td width=20%>用户名</td><td width=20%>名字</td></tr>");
			if(data.state==100){
				alert("没有查询到数据");
				return null;
			}
			var list=data.data;
			for(var i=0;i<list.length;i++){
				var id=list[i].userid ;
				var username = list[i].username;
				
				$("#monitorList02").append("<tr><td><input name=\"ckb\" type=\"checkbox\"   sensor-name="+username+" sensor-id="+id+" /></td><td>" +
						id+"</td><td>"+username+"</td></tr>  ");
			}
		}
	})
}
var searchTeacher = function(){
	var teacherid = $("#teacherid").val();
	var teachername = $("#teachername").val();
	if(teacherid ==undefined&&teachername==undefined){
		alert("查询条件不能为空");
		return null;
	}
	display(teacherid,teachername);
}

效果

注意事项

1.弹出窗的滑轮需要针对显示的div特别设置

//滑动效果
style="width: 100%;overflow-y: auto;height:400px;"