zoukankan      html  css  js  c++  java
  • bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field

    $('#myModal').on('shown', function() {
        $(document).off('focusin.modal');
    });

    这个是国内同学的解决方法:

    http://www.oschina.net/question/226830_143869

    //显示modal
    $('#myModal').modal('show');
    //show完毕前执行
    $('#myModal').on('shown', function () {
            //加上下面这句!解决了~
            $(document).off('focusin.modal');
        // 打开Dialog后创建编辑器
        KindEditor.create('textarea[name="content"]', {
            resizeType : 1
        });
    })
    //hide完毕前执行
    $('#myModal').on('hidden', function () {
        // 关闭Dialog前移除编辑器
        KindEditor.remove('textarea[name="content"]');
    })

    下面是我在项目中的应用,请大家注意加注释的那一句!

    function computeMaskHeight() {
                var obj = $("#blockLoading");
                var parent = obj.parent();
                obj.height(parent.height());
            }
    
            function block(opt) {
                var defaults = {
                    title: "",
                    showClose: true,
                    showOk: true,
                    showBottom: true,
                    showTitle: true,
                    showHead: true,
                    onOk: function() {
                    },
                    onShown: function(e) {
                    }
                };
                var setting = $.extend(defaults, opt);
                $("#blockTitle").html(setting.title);
                if (setting.showClose) {
                    $("#closeBlock, #closeBlockX").show();
                } else {
                    $("#closeBlock, #closeBlockX").hide();
                }
    
                if (setting.showOk) {
                    $("#blockOk").show();
                } else {
                    $("#blockOk").hide();
                }
                $("#blockOk").unbind().click(function() {
                    setting.onOk();
                });
    
                if (setting.showBottom) {
                    $("#blockBottom").show();
                } else {
                    $("#blockBottom").hide();
                }
    
                if (setting.showHead) {
                    $("#blockHead").show();
                } else {
                    $("#blockHead").hide();
                }
                $("#blockBody").html("<i class='icon-spinner icon-spin icon-4x'></i>");
                $('#blockContainer').off('shown.bs.modal').on('shown.bs.modal', function (e) {
                    $(document).off('focusin.modal');//解决编辑器弹出层文本框不能输入的问题http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field
                    setting.onShown(e);
                });
                $("#blockContainer").modal();
    
            }
  • 相关阅读:
    浏览器之window对象--javascript
    CSS3盒子模型
    CSS3动画以及animation事件
    CSS3响应式布局
    原生JS实现tab切换--web前端开发
    html5表单与PHP交互
    UITableView 的坑
    多线程:Operation(二)
    多线程:Operation(一)
    GCD(Swift)
  • 原文地址:https://www.cnblogs.com/fuyujian/p/4157541.html
Copyright © 2011-2022 走看看