js 單擊 彈出 頁面 Model
阿新 • • 發佈:2018-11-22
//效果
// model
<%--Model框--%> <div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content" style="margin-right: 250px"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel"> 新增角色 </h4> </div> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <form role="form"> <div class="form-group" style="width: 300px"> <label for="exampleInputpermissionName">角色名稱</label><input type="text" class="form-control" id="exampleInputpermissionName" placeholder="請輸入角色名稱"/> </div> <div class="form-group" style="width: 300px"> <label for="exampleInputurl">角色型別</label><input type="url" class="form-control" id="exampleInputurl" placeholder="請輸入角色型別"/> </div> </form> </div> </div> </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 --> <%--Model框--%>
//js
$(function () {
console.log('rolelist.js');
$('#rolelist').on('click','.addRole',addRole)
});
/**
* 彈出Model
*/
function addRole() {
$("#mymodal").modal().show();
}