NicEdit 문제가있는 모달 JQuery-UI 대화 상자

NicEdit 편집기가있는 JQuery 모달 대화 상자가 있습니다. NicEditor에는 사용자가 직접 HTML을 조정할 수있는 HTML 버튼이 있습니다. Modal Dialogue 외부에서 올바르게 작동합니다. 모달 대화 상자 안에서는 열려 있지 않습니다.NicEdit 문제가있는 모달 JQuery-UI 대화 상자

나는 이것을 Plunker에서 복제했습니다. https://plnkr.co/edit/kr6GAS4Z0SNh6Ws38WdO?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    </head> 

    <body> 
    <div id="dialog" title="test" style="display:none;"> 
    <form> 
     <textarea id="editor"></textarea> 
    </form> 
</div> 
<input type="button" id="test" value="open dialog wysiwyg"/>  
    </body> 
<script> 
    $('#test').click(function(){ 
    $('#dialog').dialog({ 
     width:400, 
     height:400, 
     modal:true, 
     open: function(){ 
      new nicEditor({ minHeight: 220, maxHeight: 220, fullPanel: true, iconsPath:'https://cdn.jsdelivr.net/nicedit/0.9r24/nicEditorIcons.gif'}).panelInstance('editor'); 
     } 
    }); 


}); 

</script> 
</html>

이이 일을 할 수있는 방법이 있습니까?

출처

2017-03-01 Chris Nevill

나는 NicEdit 대화 자체 편집 창을 배치하지에서 문제가 줄기 생각 - 내가가 본체에 붙어 생각합니다. 모달을 끄기로하면이 문제를 해결할 수 있습니다. –

의심되는 부분은 운영 문제입니다. 이 시도 :

https://plnkr.co/edit/pEFjSYhCem5TFkUeunvt?p=preview

HTML

<head> 
    <meta charset="utf-8" /> 
    <title> 
    <!-- Title here --> 
    </title> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://code.jquery.com/jquery-1.6.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
    <script src="./nicedit.js"></script> 
</head> 

<body> 
    <textarea id="editor"></textarea> 
    <div id="dialog"> 
    <textarea id="editorInDialog"></textarea> 
    </div> 
    <input type="button" id="test" value="open modal dialog" /> 
    <script> 
    $('#test').click(function() { 
     $("#dialog").dialog("open"); 
    }); 
    $('#dialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     open: function() { 
     new nicEditor({ 
      fullPanel: true, 
      iconsPath: 'https://cdn.jsdelivr.net/nicedit/0.9r24/nicEditorIcons.gif' 
     }).panelInstance('editorInDialog'); 
     } 
    }); 

    new nicEditor({ 
     fullPanel: true, 
     iconsPath: 'https://cdn.jsdelivr.net/nicedit/0.9r24/nicEditorIcons.gif' 
    }).panelInstance('editor'); 
    </script> 
</body>

출처

2017-03-02 20:26:53 Twisty

동일한 문제가있는 것으로 보입니다. HTML 버튼을 클릭하면 HTML 편집기가 열리지만 편집기를 클릭하면 다시 닫힙니다. –

그래서이 특정 문제는 일종의 스태킹/요소 포커스 문제입니다. HTML "대화 상자"는 사용 가능한 공간에 나타나지만이를 클릭하거나 상호 작용할 때 닫힙니다. 이 경우에 'z-index'가 오버레이보다 높을 필요가 있는지 궁금합니다 (이 경우 1003과 같음). – Twisty

열릴 때'z-index'가 9999라는 것 같습니다. 더 많은 조사가 필요합니다. – Twisty

NicEdit 문제가있는 모달 JQuery-UI 대화 상자

답변

관련 문제