bootstrap modal 彈出其他頁面
阿新 • • 發佈:2019-02-11
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>