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

时间:2015-11-23 07:32:07

标签: jquery css jquery-ui

Please find the screen shot 使用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>

5 个答案:

答案 0 :(得分:0)

要取消聚焦元素(buttoninput等),您可以使用blur函数(https://api.jquery.com/blur/)。

我修复了你的片段。

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

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

感谢大家的宝贵回复。

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

  

焦点

     

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

     
      
  1. 对话框中具有自动对焦属性的第一个元素
  2.   
  3. 对话框内容中的第一个:tabbable元素
  4.   
  5. 对话框按钮窗格中的第一个:tabbable元素
  6.   
  7. 对话框的关闭按钮
  8.   
  9. 对话框本身
  10.   

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

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

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

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

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

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

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

答案 4 :(得分:0)

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

simp [H]

或添加

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

});