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

当使用JQueryUI模式对话框时，关闭按钮会自动将焦点引导通过jquery工具提示显示标题。我不想在模态中集中任何东西。我试图在模态窗口的标题上添加一个点击触发器，但它似乎没有效果。JQueryUI模式 - 关注关闭按钮 - 如何删除关闭按钮上的焦点

请帮帮我。

<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() { \t \t 
 
    $("#dialog").dialog({ 
 
    \t width : 710, 
 
\t height : 410, 
 
\t modal: true, 
 
\t resizable: false, \t 
 
\t draggable: false 
 
\t 
 
    }); 
 
    });

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

 
.ui-dialog-titlebar { 
 
    height: 15px; 
 
\t } 
 
\t 
 
\t 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>

来源

2015-11-23 Narendrakumar M

哪里是你popup.html SRC？ –

你可以用任何html页面代替popUp.html –

@NarendrakumarM html popUp.html无所谓.. –

要以无焦点的元素（button，input等），你可以使用blur功能（https://api.jquery.com/blur/）。

我已修复您的代码段。

$(function() { \t \t 
 
    $("#dialog").dialog({ 
 
    width : 310, 
 
    height : 210, 
 
    modal: true, 
 
    resizable: false, \t 
 
    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; 
 
} 
 
\t 
 
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>

来源

2015-11-23 07:42:14

谢谢，但如果我再次点击外部弹出窗口（灰色区域），我正在关注关闭按钮（在镀铬区域关闭按钮周围的蓝色线条） –

我刚更新了我的答案。 –

谢谢@Mosh Feu –

我得到了答案。请找到源代码。

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

感谢每一个宝贵的答复。

来源

2015-11-23 08:04:27

这些解决方案都不适合我。我发现这个疯狂的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/

来源

2017-12-07 16:40:44 melicent

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

回答

相关问题