Question

当我尝试点击id为“customNotepad”的textarea时，在打开UI对话框时没有获得焦点。但是，我能够调整textarea的大小。当我点击ID为“Header”的div时，它也会发出警报。

#customNotepad{      
    z-index:1002 !important;
	position:absolute !important;      
}
#noteText{      
    z-index:1000;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog({   modal: true});
    
  });
  </script>
</head>
<body>
  
  <div id=customNotepad><div id="Header"><span id="Btn" onclick={alert()}>ClrButton</span><span id="">Title</span></div>
    <div id="notepadContent">
      <textarea maxlength="150" id="noteText"  style="width:100%;height:100%;"></textarea></div>
  </div> 
       
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
</body>
</html>

Answer 1

这根本不可能。根据定义，模态对话框不允许与页面上的其他元素进行交互。

如果您希望能够使用textarea，请不要将其设为模态。

我真的没有看到在这里进行模态对话有什么好处，还有一些伤害。

参考：http://api.jqueryui.com/dialog/#option-modal

当modal jQuery UI对话框打开时，Textarea没有得到关注

1 个答案: