你的位置:首页 > ASP.net教程

[ASP.net教程]基于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" >  <div >    <div >      <div >        <button aria-hidden="true" data-dismiss="modal" type="button">          ×        </button>        <h4 id="myModalLabel" >          <strong>添加灵感</strong>        </h4>      </div>      <div >        <div >          <label for="name">灵感描述</label>          <textarea placeholder="请填写灵感描述" rows="3" id="txt_idea-dec"></textarea>        </div>      </div>      <div >        <div >          <label for="name">发布人</label>          <input type="text" placeholder="请填写发布人,不填则为匿名" id="txt_idea-publisher">        </div>      </div>      <div >        <button data-dismiss="modal" type="button">          关闭        </button>        <button type="button" id="Modal-Add">          添加        </button>      </div>    </div><!-- /.modal-content -->  </div><!-- /.modal --></div>