焦點不工作的JQmodal

我使用ajax調用一些基本輸入元素（如a，輸入，標籤和按鈕）來加載JQmodal。我需要馬上開模焦點不工作的JQmodal

注後添加自定義類的重點內容：請使用tab鍵來關注每個元素

HTML

<p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p> 

<p><a href="http://www.w3.org/">W3C</a> is a link to a website on the World Wide Web.</p> 

<a href="#" class="jqModal">view</a> 
... 
<div class="jqmWindow" id="dialog"> 
</div>

CSS：

.jqmWindow { 
    display: none; 

    position: fixed; 
    top: 17%; 
    left: 50%; 

    margin-left: -300px; 
    width: 600px; 

    background-color: #EEE; 
    color: #333; 
    border: 1px solid black; 
    padding: 12px; 
} 

.jqmOverlay { background-color: #000; } 

/* Fixed posistioning emulation for IE6 
    Star selector used to hide definition from browsers other than IE6 
    For valid CSS, use a conditional include instead */ 
* html .jqmWindow { 
    position: absolute; 
    top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight)/100) + 'px'); 
} 

*.focused 
{ 
    outline-width: 2px ; 
    outline-color: #282828; 
    outline-style: dotted; 
}

Java腳本

$(document).ready(function() { 
    $('#dialog').jqm({ajax: 'https://raw.githubusercontent.com/jothikannan89/jqModal/ed84cf99ebe061e749e9774e64387ba7f/examples/ajax_tab.html'}); 
}); 

    $("a,input,button,select,textarea,.jqmClose").on('focus', 
      function(event) { 
       event.preventDefault(); 
       $(this).addClass('focused'); 
    }); 
    $("a,input,button,select,textarea,.jqmClose").on('blur', 
      function(event) { 
       event.preventDefault() ; 
       $(this).removeClass('focused');  
    });

我所得到的是怪異，重點類添加父頁面元素，但不會增加通過Ajax的模態，但默認焦點裝的元素正在

小提琴例如： Fiddle

來源

2017-06-19 Jothi Kannan

我有一個關於模態和ajax對話框的焦點和Tab鍵問題的補丁：https：//github.com/briceburg/jqModal/issues/29 –

當你這樣做：

$("a,input,button,select,textarea,.jqmClose").on('focus', 
     function(event) { 
      event.preventDefault(); 
      $(this).addClass('focused'); 
    });

動態內容不會在DOM尚未加載（這就是爲什麼你對預期的行爲主頁面，但不在模態內容中）。您必須等待您的ajax請求返回附加事件處理程序。

我不知道JQM是如何工作的，但它必須爲您提供承諾或傳遞一些回調的方法。

EDIT：

從JQM文檔，有一個onload回調：

的onLoad（回調）調用Ajax內容加載後的權利。

// onLoad : assign Mike Alsup's most excellent ajaxForm plugin to the returned form element(s). 
var myLoad = function(hash){ $('form',hash.w).ajaxForm(); }; 
$('#dialog').jqm({onLoad:myLoad});

用它來連接你的處理器在onload功能，它會做的伎倆。

來源

2017-06-19 12:12:15 sjahan

感謝您的幫助，我更新了小提琴https：// jsfiddle.net/96eezgx4/3/，你仍然可以在打開模式時看到，重點只適用於父頁面元素，有時它在彈出元素中工作 –

點擊查看打開模式 –

謝謝，我在看！ brb – sjahan

焦點不工作的JQmodal

回答

相關問題