1. 程式人生 > >bootstrap modal 彈出其他頁面

bootstrap modal 彈出其他頁面

1、不使用js 方式

1.1 按鈕

<a class=" btn default" href="ui_modals_ajax_sample.html" data-target="#ajax" data-toggle="modal">
										View Demo </a>
1.2 對話方塊
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">									
									<div class="modal-dialog">
										<div class="modal-content">
										</div>
									</div>
								</div>

1.3其它頁面

div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
	<h4 class="modal-title">Ajax Content</h4>
</div>
<div class="modal-body">
	<div class="row">
		<div class="col-md-12">
			<h4>Some Input</h4>
			<p>
				<input type="text" class="col-md-12 form-control">
			</p>
			<p>
				<input type="text" class="col-md-12 form-control">
			</p>
			<p>
				<input type="text" class="col-md-12 form-control">
			</p>
			<p>
				<input type="text" class="col-md-12 form-control">
			</p>
			<p>
				<input type="text" class="col-md-12 form-control">
			</p>
			<p>
				<input type="text" class="col-md-12 form-control">
			</p>
			<p>
				<input type="text" class="col-md-12 form-control">
			</p>
		</div>
	</div>
</div>
<div class="modal-footer">
	<button type="button" class="btn default" data-dismiss="modal">Close</button>
	<button type="button" class="btn blue">Save changes</button>
</div>