NicEditの問題を伴うモーダルJQuery-UIダイアログ

NicEditエディタを使用したJQueryモーダルダイアログがあります。 NicEditorには、ユーザーがHTMLを直接調整できるHTMLボタンがあります。モーダルダイアログの外でこれは正常に動作します。しかし、モーダルダイアログの内部では開いたままではありません。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ダイアログ

答えて

関連する問題