bootstrap的模态框的使用

【1】模态框的编写

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 690px; display: none;">
	<div class="modal-dialog" role="document" style="width: 690px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">搜索订单</h4>
			</div>
			<div class="modal-body">
				<div class="input-group">
					<input type="number" class="form-control" id="mobile" placeholder="手机号"/>
					<span class="input-group-addon btn btn-primary" onclick="getOrders();" style="margin-bottom: 8px;">搜索订单</span>
				        <div id="orderList"></div><div id="modelButton" style="text-align:center;"></div>
					</div>
				</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
			</div>
		</div>
	</div>
</div>

【2】设置触发模态框的按钮

<input id="links" type="button"  value="关联订单" class="btn btn-primary" data-toggle="modal" data-target="#myModal"/>

猜你喜欢

转载自blog.csdn.net/Java_Long_Asus/article/details/84108062