JQueryUI modal - 关注关闭按钮 - 如何移除关闭按钮的关注答案

【问题标题】：JQueryUI modal - focus on close button - How to remove focus on close buttonJQueryUI modal - 关注关闭按钮 - 如何移除关闭按钮的关注
【发布时间】：2015-11-23 07:32:07
【问题描述】：

使用 JQueryUI 模态对话框时，关闭按钮会自动聚焦，引导通过 jquery 工具提示显示的标题。我不希望模态中的任何内容都被关注。我曾尝试在模态窗口的标题上添加点击触发器，但似乎没有效果。

请帮帮我。

<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
  $(function() {		
    $( "#dialog" ).dialog({
    	width : 710,
	 height : 410,
	 modal: true,
	 resizable: false,	 
	 draggable: false
	
    });   
  });

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> 

.ui-dialog-titlebar {
    height: 15px;
	}
	
	iframe {

position: absolute;
top: 50%;
margin-top: -170px;
left: 50%;
margin-left: -340px;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title> 
</head>
<body>
<div class="modal"></div>
<div id="dialog"  title=" ">
  <iframe style="position:absolute;Left:150" frameborder="0" scrolling="no" width="670" height="350" src="popUp.html" ></iframe>
</div>
</body>
</html>

【问题讨论】：

你的 popup.html 源代码在哪里？
你可以使用任何html页面代替popUp.html
@NarendrakumarM html popUp.html 没关系..
是的。我知道。这就是为什么我不在这里发布它。

标签： jquery css jquery-ui

【解决方案1】：

这些解决方案都不适合我。我在野外发现了这个修复它的 jsfiddle。

$( "#dialog-modal" ).dialog({
    height: 140,
    modal: true,

    // When the dialog is opened, move the focus off the button. This
    // causes the close button to trigger a click event when the space
    // key is pressed.
    open: function( e, ui ) {
        $( this ).siblings( ".ui-dialog-titlebar" )
                 .find( "button" ).blur(); 
    }
});

https://jsfiddle.net/adamboduch/ekaW6/

【讨论】：

【解决方案2】：

我得到了答案。请找到来源。

http://forum.jquery.com/topic/dialog-close-button-is-focused-on-open

感谢大家的宝贵回复。

【讨论】：

【解决方案3】：

要取消焦点元素（button、input 等），您可以使用 blur 函数（https://api.jquery.com/blur/）。

我已经修复了你的 sn-p。

$(function() {		
  $( "#dialog" ).dialog({
    width : 310,
    height : 210,
    modal: true,
    resizable: false,	 
    draggable: false
  });   
  
  /* This is the trick
  * do the blur and remove the hendler from the focus event 
  */
  unBlur();
  $('body').click(unBlur);
  $('.ui-button').off('focus');
});

function unBlur() {
  $('.ui-button').blur();  
}

.ui-dialog-titlebar {
    height: 15px;
}
	
iframe {
  position: absolute;
  top: 50%;
  margin-top: -170px;
  left: 50%;
  margin-left: -340px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  outline:none !important;  
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> 

<div class="modal"></div>
<div id="dialog"  title=" ">
  <iframe style="position:absolute;Left:150" frameborder="0" scrolling="no" width="670" height="350" src="popUp.html" ></iframe>
</div>

【讨论】：

谢谢，但是如果我再次点击外部弹出窗口（灰色区域），我将专注于关闭按钮（chrome 中关闭按钮周围的蓝线）

【解决方案4】：

根据JQuery UI Dialog的文档，在对话框中打开后焦点是这样设置的：

专注

打开对话框后，焦点会自动移至第一个符合以下条件的项目：

对话框中具有自动对焦属性的第一个元素

对话框内容中的第一个 :tabbable 元素

对话框按钮窗格中的第一个 :tabbable 元素

对话框的关闭按钮

对话框本身

来源：http://api.jqueryui.com/dialog/#event-focus

问题来自 JQuery UI Tooltip。默认情况下，工具提示显示在mouseover和focusin上。

如果您的对话框中没有其他可聚焦的内容，则会转到第 4 点并聚焦关闭按钮，从而显示工具提示。

您应该调整配置工具提示的方式，以便关闭按钮没有工具提示，或者它不会在焦点上显示工具提示。

我认为在焦点上显示工具提示不是最佳选择，我以这种方式禁用了工具提示的焦点：

jQuery(document).tooltip({
    items: "[title]:hover"
});

当然，您可能必须根据创建工具提示的方式调整代码。

【讨论】：

【解决方案5】：

您可以添加自动对焦的隐藏输入

<input type="hidden" autofocus="autofocus" />

或添加

$('#myDialog').dialog({
open: function(event,ui) {
    $(this).parent().focus();
}

});

【讨论】：