Question

使用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>

Answer 1

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

我修复了你的片段。

＆＃13;

$(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();  
}

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

Answer 2

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

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

感谢大家的宝贵回复。

Answer 3

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

$( "#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/

Answer 4

根据“ JQuery UI对话框”的文档，在对话框中以以下方式打开后即可设置焦点：

焦点

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


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

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

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

对话框的关闭按钮

对话框本身

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

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

如果对话框中没有其他可聚焦的内容，它将指向第4点并聚焦关闭按钮，这将显示工具提示。

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

我认为将工具提示显示在焦点上并不是最佳选择，我通过以下方式禁用了工具提示的焦点：

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

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

Answer 5

您可以添加具有自动焦点的隐藏输入

simp [H]

或添加

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

}）;

JQueryUI模式 - 专注于关闭按钮 - 如何删除关闭按钮上的焦点

5 个答案: