欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap编写弹出窗

程序员文章站 2024-03-21 12:09:46
...

环境

需要引入的环境:
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);
}

效果

Bootstrap编写弹出窗

注意事项

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

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