基于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>

时间: 2024-10-13 16:23:32

基于bootstrap的Dialog的相关文章

自己写的基于bootstrap风格的弹框插件

自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTPARAMS = { width: 500, title: '提示消息', content: '', okbtn: '确定', cancelbtn: '取消', headerBackground: 'info', vbackdrop: 'static', //默认点击遮罩不会关闭modal vkeyb

基于Bootstrap的jQuery开关按钮组合

Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的样式风格,比较清新和简单.这款jQuery开关按钮可以满足你不同的应用需求,包括样式.大小等. 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="row"> <di

C#开发微信门户及应用(46)-基于Bootstrap的微信门户应用管理系统功能介绍

在前面介绍很多的微信框架,基本上都采用EasyUI的界面来搭建的微信框架,如随笔<C#开发微信门户及应用(8)-微信门户应用管理系统功能介绍>介绍的一样,不过随着微信的H5应用越来越多,因此转换为更适合做H5页面应用框架的Bootstrap开发框架,本文介绍的整个微信模块都是基于Bootstrap的应用. 微信开发包括公众号.企业号.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解

基于Bootstrap的后台通用模板

人总是比较刁的,世界的时尚趋势不断变化,对系统UI的审美也在不断疲劳中前进,直接觉得好好的UI,过了半年觉得平平无奇,不想再碰,需要寻求新的兴奋点. 下面这套UI就是半年前的(今日:2015-12),感觉已经落伍了,贴出来已告别一个阶段,如果有喜欢的可以联系我领养,(*^__^*) 嘻嘻…… UI框架名称:ZFXUI UI框架特点:1.响应式(PC.移动均可用) 2.适用于企业内部信息管理系统(个人认为不适合做互联网产品),配合工具开发效率比较高 3.基于Bootstrap.简约大气.操作用户体

基于bootstrap的富文本框——wangEditor【欢迎加入开发】

先来一张效果图: 01. 引言 老早就开始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的例子. 现在网络上开源的富文本框插件非常多,一搜索一大堆,但是基于bootstrap的还不多,现在只有一个“bootstrap-wysiwyg”,老外写的,没有一个汉字,大家可以fork一下源码看看,写的非常简洁,压缩之后不到10KB,非常厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文,给程序猿用着还可

JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.com/preview/WB0B30DGR Ace模板功能介绍地址:http://www.cnblogs.com/txw1958/p/Ace-Responsive-Admin-Template.html 一.效果展示 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以

基于bootstrap的富文本框——wangEditor【欢迎增加开发】

先来一张效果图: 01. 引言 老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例. 如今网络上开源的富文本框插件许多,一搜索一大堆,可是基于bootstrap的还不多.如今仅仅有一个"bootstrap-wysiwyg".老外写的,没有一个汉字.大家能够fork一下源代码看看,写的很简洁.压缩之后不到10KB.很厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文

bootstrap-dialog简单使用

使用bootstrap想要实现弹出对话框的效果,我们可以使用bootstrap的modal.但是modal使用起来比较繁琐,需要编写大量的div代码.bootstrap-dialog很好的解决了这个问题. bootstrap-dialog的gitlhub地址 bootstrap-dialog参考案例 使用boostrap-dialog非常简单, 首先,引入boostrap-dialog.js和bootstrap-dialog.css文件 然后,简单的一句就可以搞定了. BootstrapDial

web多终端开发学习系列(三)--- 基于bootstrap的表格插件bootstrap-table

基于网页管理系统的开发大多数功能只是对数据的显示与操作,对于数据的显示一般都是通过table表格来显示,所以管理系统的开发很有必要引入表格插件,对于sencha touch等商业化框架,都有自己自带的表格控件,而对于bootstrap需要引入第三方的表格插件,这里我学习下bootstrap table. 介绍 bootstrap table是基于bootstrap框架的一个表格插件,官网地址是http://wenzhixin.net.cn/p/bootstrap-table/docs/index