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

bootstrap的模态框的使用

程序员文章站 2023-12-30 13:13:16
...

【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"/>

 

相关标签: 模态框 BootStrap

上一篇:

下一篇: