console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h2>模态框（Modal）插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!-- 模态框（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">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body">
				点击关闭按钮检查事件功能。
			</div>
            <div class="form-group">
   <div class="col-sm-4 control-label">选择文件</div>
   <div class="col-sm-6">
       <div class="input-group">
       <input id='location' class="form-control" onclick="$('#i-file').click();">
           <label class="input-group-btn">
               <input type="button" id="i-check" value="浏览文件" class="btn btn-primary" onclick="$('#i-file').click();">
           </label>
       </div>
   </div>
   <input type="file" name="file" id='i-file'  accept=".xls, .xlsx" onchange="$('#location').val($('#i-file').val());" style="display: none">
</div>

			<div class="modal-footer">
				<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-dialog -->
</div><!-- /.modal -->
<script>
   $(function () { $('#myModal').modal('hide')});
</script>
<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('嘿，我听说您喜欢模态框...');})
   });
</script>

</body>
</html>

html,body{
	  width: 100%;
	  height:100%;
	  margin: 0;
	  padding: 0;
	}
	.wrap{
	    animation: wrapper 3s forwards;
	    height: 100%;
	    left: 0;
	    opacity: 0;
	    position: fixed;
	    top: 0;
	    width: 100%;
	}
	.bg{
	    animation: bg 60s linear infinite;
	    backface-visibility: hidden;
	    transform: translate3d(0,0,0);
	    background: #348cb2 url(http://7xqjlo.com1.z0.glb.clouddn.com/bg.jpg) bottom left;
	    background-repeat: repeat-x;
	    height: 100%;
	    width: 300%;
	    left: 0;
	    opacity: 1;
	    position: fixed;
	    top: 0;
	}
	.overlay{
	    animation: overlay 1.5s 1.5s forwards;
	    background-attachment: fixed, fixed;
	    background-image: url(http://7xqjlo.com1.z0.glb.clouddn.com/overlay-pattern.png), url(http://7xqjlo.com1.z0.glb.clouddn.com/overlay.svg);
	    background-position: top left, center center;
	    background-repeat: repeat, no-repeat;
	    background-size: auto, cover;
	    height: 100%;
	  	width:100%;
	    left: 0;
	    opacity: 0;
	    position: fixed;
	    top: 0;
	    width: 100%;
	}

	@keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}
		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}