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);
}
效果
注意事项
1.弹出窗的滑轮需要针对显示的div特别设置
//滑动效果
style="width: 100%;overflow-y: auto;height:400px;"
上一篇: LVS负载均衡之DR模式