基於bootstrap的Dialog

標籤：

function yms_Dialog(container_id, modal_path,handle_function) {    /// <summary>    ///         方法介紹:   上海一門式Dialog(bootstrap框),框的地址為部分視圖(注意框上彈框時,父框和子框id不能衝突)    /// </summary>    /// <param name="container_id">容器的ID</param>    /// <param name="modal_path">框的地址</param>    var div_container = "<div id=‘" + container_id + "‘></div>";    $("body").append(div_container);    $("#" + container_id).load(modal_path, function () {        $("#" + container_id).find(‘#myModal‘).modal({            show: true,            backdrop: true        });        $("#" + container_id).find(‘#myModal‘).on(‘hide.bs.modal‘, function () {            // 執行一些動作...            $(this).remove();            $("#" + container_id).remove();        })        if (handle_function != undefined)        {            handle_function();        }    });}if (typeof jQuery == ‘undefined‘) {    alert("請先匯入jQuery");} else {    jQuery.extend({        yms_Dialog: yms_Dialog    });}

使用

前台js

$.yms_Dialog("edit_dialog", "/DataEntering/EditView?id=" + id, function () {
                $("#data_type_edit").val($("#data_type_edit").attr("gc"));
            });

部分視圖代碼：

<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade in" style="display: block;">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">                    ×                </button>                <h4 id="myModalLabel" class="modal-title">                    <strong>添加靈感</strong>                </h4>            </div>            <div class="modal-body">                <div class="form-group">                    <label for="name">靈感描述</label>                    <textarea placeholder="請填寫靈感描述" rows="3" class="form-control" id="txt_idea-dec"></textarea>                </div>            </div>            <div class="modal-body">                <div class="form-group">                    <label for="name">發布人</label>                    <input type="text" placeholder="請填寫發布人，不填則為匿名" class="form-control" id="txt_idea-publisher">                </div>            </div>            <div class="modal-footer">                <button data-dismiss="modal" class="btn btn-default" type="button">                    關閉                </button>                <button class="btn btn-primary" type="button" id="Modal-Add">                    添加                </button>            </div>        </div><!-- /.modal-content -->    </div><!-- /.modal --></div>

 

基於bootstrap的Dialog