dialog获取焦点

弹出层是一个iframe

openWindow: function (options) {
            var url = options.url;
            url += url.indexOf("?") > 0 ? "&" : "?";
            url += "ran=" + Math.random();
            var isScroll = options.isScroll ? ‘yes‘ : ‘no‘;
            rcpnDetail.mainWindow = $("<div></div>");
            rcpnDetail.mainWindow.html(‘<iframe frameborder="0" width="100%" scrolling="‘ + isScroll + ‘" height="‘ + options.height + ‘" src="‘ + url + ‘"></iframe>‘)
                .dialog({
                    width: options.width,
                    title: options.title,
                    name: options.name,
                    isDraggable: true,
                    afterClose: options.afterClose
                });
        }

调用自定义jquery.dialog.js

(function($) {
    $.fn.dialog = function(options) {
        if (this.length == 0) return null;
        var method = typeof arguments[0] == "string" && arguments[0];
        var args = method && Array.prototype.slice.call(arguments, 1) || arguments;
        return this.each(function() {
            var context = $(this).data("dialog");
            if (!context) {
                context = new $.dialog(this, options);
                $(this).data(‘dialog‘, context);
            }
            if (method) context[method].apply(context, args);
            else context.show();
        });
    };

$.dialog = function(control, options) {
        var context = this;
        var options = $.extend({}, $.fn.dialog.defaults, options);
        options.isCreateId = options.isCreateId ? options.isCreateId : ‘dialog-‘ + $.dialog.__count; // 唯一ID
        var overlayId = options.isCreateId + ‘-overlay‘; // 遮罩层ID
        var isShow = false;
        var isIe = $.browser.msie;
        this.isDynamic = $(control).parent().length == 0;
        var returnValue = null; //关闭窗体返回值
        var barHtml = !options.isShowTitle ? ‘‘ : [
            ‘<div class="bar">‘,
            ‘<span class="title">‘ + options.title + ‘</span>‘,
            ‘<a class="close"><i class="fa fa-times"></i>‘ + options.closeText + ‘</a>‘,
            ‘<div class="clear"></div>‘,
            ‘</div>‘
        ].join(‘‘);

var content = $(‘<div class="content"></div>‘).append($(control).show());
        var dialog = $(‘<div id="‘ + options.isCreateId + ‘" name="‘ + (options.name ? options.name : options.isCreateId) + ‘" class="dialog" style="display:none"></div>‘).css(‘width‘, options.width).append(barHtml).append(content);
        $(‘body‘).append(dialog);

var resetPos = function() {
            if (options.isCenter) {
                var left = ($(window).width() - dialog.width()) / 2;
                var top = ($(window).height() - dialog.height()) / 2;
                if (top < 0) {
                    top = 10;
                }
                dialog.css({ top: top + $(document).scrollTop(), left: left + $(document).scrollLeft() });
            }

if (options.isNearTrigger) {
                var postion = { t: 0, l: 0, w: 0, h: 0 };
                if (options.triggerElement) {
                    var offsetElement = $(options.triggerElement).offset();
                    postion = {
                        t: offsetElement.top,
                        l: offsetElement.left,
                        w: $(options.triggerElement).outerWidth(),
                        h: $(options.triggerElement).outerHeight()
                    };
                }

if ($.isFunction(options.triggerPosition)) {
                    options.triggerPosition.call(context, dialog, postion);
                } else {
                    dialog.css({ left: postion.l + postion.w, top: postion.t });
                }
            }
        }

var init = function() {
            /* 是否需要初始化背景遮罩层 */
            if (options.isModal) {
                $(‘body‘).append(‘<div id="‘ + overlayId + ‘" class="dialog-overlay"></div>‘);
                $(‘#‘ + overlayId).css({
                    ‘left‘: 0,
                    ‘top‘: 0,
                    ‘width‘: ‘100%‘,
                    ‘height‘: $(document).height(),
                    ‘z-index‘: ++$.dialog.__zindex,
                    ‘position‘: ‘absolute‘
                }).hide();
            }

dialog.css({
                ‘z-index‘: ++$.dialog.__zindex,
                ‘position‘: options.isFixed ? ‘fixed‘ : ‘absolute‘
            });

/* 以下代码处理框体是否可以移动 */
            var mouse = { x: 0, y: 0 };

function moveDialog(event) {
                var e = window.event || event;
                var top = parseInt(dialog.css(‘top‘)) + (e.clientY - mouse.y);
                var left = parseInt(dialog.css(‘left‘)) + (e.clientX - mouse.x);
                dialog.css({ top: top, left: left });
                mouse.x = e.clientX;
                mouse.y = e.clientY;
            };

dialog.find(‘.bar‘).mousedown(function(event) {
                if (!options.isDraggable) {
                    return;

}
                var e = window.event || event;
                mouse.x = e.clientX;
                mouse.y = e.clientY;
                $(document).bind(‘mousemove‘, moveDialog);
            });

$(document).mouseup(function(event) {
                $(document).unbind(‘mousemove‘, moveDialog);
            });

/* 绑定一些相关事件。 */
            dialog.find(‘.close‘).bind(‘click‘, function() {
                if (!isShow) return;
                if (context.isDynamic) context.close();
                else context.hide();
            });
            dialog.bind(‘mousedown‘, function() {
                dialog.css(‘z-index‘, ++$.dialog.__zindex);
            });
            /* 修改项，添加keycode冒泡判断 2014-09-10 */
            if (!$.dialog.__keydown) {
                window.listenKeyDownBubble = true;
                $(document).keydown(function(event, data) {
                    // 替换keyCode
                    if (data && data.keyCode) {
                        event.keyCode = data.keyCode;
                    }
                    if (event.keyCode == 27) {
                        var elements = $(".dialog:visible");
                        if (elements.length == 0) return false;
                        elements = elements.sort(function(l, r) {
                            if (parseInt($(l).css("z-index")) < parseInt($(r).css("z-index"))) return 1;
                            else return -1;
                        });
                        var current = $(elements[0])
                            .find("> .content > :first-child")
                            .data("dialog");
                        if (current.isDynamic) current.close();
                        else current.hide();
                        return false;
                    }
                });
                $.dialog.__keydown = true;
            }
        }

this.show = function() {
            if ($.isFunction(options.beforeShow)) {
                if (!options.beforeShow.call(context, options)) {
                    return;
                }
            }

var getOpacity = function(id) {
                if (!isIe) {
                    return $(‘#‘ + id).css(‘opacity‘);
                }

var el = document.getElementById(id);
                return (undefined != el
                        && undefined != el.filters
                        && undefined != el.filters.alpha
                        && undefined != el.filters.alpha.opacity)
                    ? el.filters.alpha.opacity / 100 : 0.5;
            }
            /* 是否显示背景遮罩层 */
            if (options.isModal) {
                $(‘#‘ + overlayId).fadeTo(‘fast‘, getOpacity(overlayId));
            }

dialog.fadeIn(‘fast‘, function() {
                if ($.isFunction(options.afterShow)) {
                    options.afterShow.call(context, options);
                }
                var d = $(this).find(‘iframe‘);
                if (d.length==0) {
                    $(this).focus();
                } else {
                    d.one("load", function() {
                        this.contentWindow.focus();
                    });
                }
                
                returnValue = null; //清空
                isShow = true;
            });
              
            resetPos();
        }

this.close = function() {
            if ($.isFunction(options.beforeClose)) {
                if (!options.beforeClose.call(context, options)) {
                    return;
                }
            }

dialog.fadeOut(‘fast‘, function() {
                $(this).remove();
                isShow = false;
                if ($.isFunction(options.afterClose)) {
                    options.afterClose.call(context, options);
                }
                returnValue = null; //清空
            });

if (options.isModal) {
                $(‘#‘ + overlayId).fadeOut(‘fast‘, function() { $(this).remove(); });
            }

delete context;
        }

this.hide = function() {
            if (!isShow) {
                return;
            }

if ($.isFunction(options.beforeHide)) {
                if (!options.beforeHide.call(context, options)) {
                    return;
                }
            }

dialog.fadeOut(‘fast‘, function() {
                if ($.isFunction(options.afterHide)) {
                    options.afterHide.call(context, options);
                }
            });

if (options.isModal) {
                $(‘#‘ + overlayId).fadeOut(‘fast‘);
            }

isShow = false;
        }

//设置窗体返回值
        this.setReturnValue = function(value) {
            returnValue = value;
        }

//获取窗体放回值
        this.getReturnValue = function() {
            return returnValue;
        }

init.call(this);

$.dialog.__zindex++;
        $.dialog.__count++;
    }

$.dialog.__zindex = 500;
    $.dialog.__count = 1;
    $.dialog.__keydown = false;

$.fn.dialog.defaults = {
        width: "auto", // 默认值。
        name: "", // dialog名称
        title: ‘标题‘, // 标题文本，若不想显示title请通过CSS设置其display为none
        isShowTitle: true, // 是否显示标题栏。
        closeText: ‘ ‘, // 关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none
        isDraggable: false, // 是否移动
        isModal: true, // 是否是模态对话框
        isCenter: true, // 是否居中。
        isFixed: false, // 是否跟随页面滚动。
        isCreateId: false, // 对话框的id，若为false，则由系统自动产生一个唯一id。
        isNearTrigger: false, // 是否跟随触发对象
        triggerElement: null, // 触发对象   id or element
        triggerPosition: null, // 调节弹窗位置事件
        beforeShow: null, // 显示前触发事件
        afterShow: null, // 显示后触发事件
        beforeClose: null, // 关闭前触发事件
        afterClose: null, // 关闭后触发事件
        beforeHide: null, // 隐藏前触发事件
        afterHide: null // 隐藏后触发事件
    };

})(jQuery);

$.getDialogByChildWindow= function(dialogName) {
    return parent.$(".dialog[name=‘" + dialogName + "‘] > .content > :first-child ");
}

在页面点击click

$("#btnBillProcess").click(function () {
       rcpnDetail.openWindow({
                width: ‘970px‘,
                name: "BillDeal",
                height: ‘600px‘,
                title: ‘账务处理‘,
                url: ‘@Url.Action("BillDeal", "Cashier")[email protected][email protected]&[email protected]‘
            });
});

弹出层打开自动获取焦点

var d = $(this).find(‘iframe‘);
 if (d.length==0) {
    $(this).focus();

} else {
  d.one("load", function() {
  this.contentWindow.focus();
 });
}

时间： 2024-11-05 19:41:18

dialog获取焦点的相关文章

jquery ui dialog autofocus 去掉默认第一个元素获取焦点

经常在dialog窗口中第一个元素为日期控件时,打开窗口则会自动显示日期下拉框. 解决办法:在dialog的open事件中,设置父对象获得焦点. p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } ,

Dialog中EditText获取焦点,并且自动弹出软键盘

//解决dilaog中EditText无法弹出输入的问题 dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM); //弹出对话框后直接弹出键盘 et_newReason.setFocusableInTouchMode(true); et_newReason.requestFocus(); CmzStaffApplication.handler.postDelayed(new Runnable

Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法自动隐藏. 解决思路:给DatePicker加上onSelect事件,在该事件中让Start Date的input元素的父元素获取焦点,这样DatePicker控件在选择日期后就自动隐藏.

jquery dialog 打开的时候自动聚焦解决方法

方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭": function() { p1_dialog_seniorSearch.dialog( "cl

Android自定义dialog中的EditText无法弹出键盘的解决

最近我独立开发的项目<全医会>已经在内测当中了,很快将会上架到各大应用市场.之前开发的几个项目都因为一些原因没有上架还是比较遗憾的.所以,最近我心情格外的好. 今天在做一个新项目,专为律师和客户开发的APP,其中有一个自定义对话框的需求.这个知识点其实很简单,就是下图这个效果: 可是当我悠闲的写完以后才发现,自定义对话框里面嵌套的EditText根本无法获取焦点,无法弹出软键盘,郁闷,以前开发的软件里面没有EditText的时候一切正常,没有发现这个隐藏的坑.下图是我之前写的一个自定义对话框:

使用DialogFragment 代替 Dialog

自从google在发布的3.0版本的安卓系统中引入了fragment之后,在google的官方文档中,我们会发现,官方建议我们使用DialogFragment 来代替原来的dialog,这样可以使我们的对话框具有更多的交互性,也更加符合面向对象的特性. google官方文档原话 Honeycomb introduced Fragments to support reusing portions of UI and logic across multiple activities in an ap

JQ UI dialog

初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话框,在当前最新版本的 jQuery UI 1.8.9 中, dialog 支持下列属性. autoOpen   初始化之后,是否立即显示对话框,默认为 true modal        是否模式对话框,默认为 false closeOnEscape   当用户按 Esc 键之后,是否应该关闭对话框

从零开始学android -- dialog

先看个效果图 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match

用dialog在前台实现一个简单的UI对话框

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>对话框部件(Dialog Widget)演示</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.m