用JS实现加载页面前弹出模态框
JS 实现 加载 模态
2023-09-11 14:21:58 时间
用JS实现加载页面前弹出模态框
2017年10月20日 17:26:39 2号自信 阅读数 5837更多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>普通管理员-出库登记</title>
</head>
<body>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
请选择出库类型
</h4>
</div>
<div class="modal-body">
出库类型是:
<select id="select" οnchange="goUrl(this.options[this.selectedIndex])">
<option value="0">请选择</option>
<option value="comAdmin_in_purchase.html">借用</option>
<option value="comAdmin_in_return.html">领用</option>
<option value="comAdmin_in_gain.html">赠与</option>
</select>
</div>
<div class="modal-footer">
<div id="thediv" align="left">你选择的出库类型是:<p></p></div>
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
确定
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//加载模态框
$('#myModal').modal();
$(document).ready(function () {
$("#select").bind("change",function(){
if($(this).val()==0){
return;
}
else{
$("p").text($(this).val());
}
});
});
//选择触发事件
function goUrl(obj){
location.href=obj.value;
}
</script>
</body>
</html>
相关文章
- JS和JSP的差别
- Flutter加载Html并实现与JS 的双向调用
- 原生js实现验证码功能(复制代码可用)
- css+JS实现遮罩弹框
- JS实现复选框全选全不选以及子复选框带动全选框的选中
- JS Foo.getName笔试题解析,杂谈静态属性与实例属性,变量提升,this指向,new一个函数的过程
- JS实现图片懒加载插件
- js 实现双向绑定
- 【前端】js实现JSON字符串格式化显示
- 原生JS取代一些JQuery方法的简单实现
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- 《Node.js区块链开发》——3.2 PoW:工作量证明机制
- JS实现数组去重的常见方法
- JS实现九宫格抽奖(一)-匀速版
- JS拖拽元素原理及实现代码
- JS 工具函数 方法(其中js的crc32和php的crc32区别)
- [js高手之路]设计模式系列课程-单例模式实现模态框
- leaflet前端JS实现高德地图POI兴趣点批量分类下载(附源码下载)
- js使用正则表达式实现文本框只能输入数字和小数点
- checkbox 与JS的应用
- Three 之 three.js (webgl)碰撞检测(非官方的简单的碰撞检测,使用局限性,仅供思路参考)
- Three 之 three.js (webgl)使用 html div 给 Threejs 场景添加背景图的方法实现
- Three 之 three.js (webgl)简单实现根据点绘制线/弧线(基于LineGeometry / Line2 / LineMaterial,绘制两点基于圆心的弧线段)
- 前端自学笔记:JSON、JSONP和JS之间的区别,Ajax、axios和jsonp的区别
- js获取DIV的位置坐标的三种方法
- Tab选项卡 延迟切换效果js实现
- JS轮播图的实现