jquery - 如何仅使用 jquery 和 css 在小屏幕中将无模式对话框显示为嵌入片段

Question

我需要显示一个包含一些内容的无模式对话框，在小屏幕和大屏幕上有所不同。在大屏幕中，它应该作为普通对话框打开，但在小屏幕中，它应该成为我主面板中的嵌入片段。此外，当屏幕旋转并且宽度从小变大时，嵌入的片段应该消失并且弹出窗口应该打开，反之亦然。这适用于正常的 Web 开发，我可以使用 jquery 和 css。

-谢谢。

Answer 1

我假设您正在使用一些 JS 方法打开对话框，对吧？您可以使用 OJET 的 ResponsiveUtils 来检测屏幕大小并决定是否要打开对话框或执行其他操作：

   var smQuery = oj.ResponsiveUtils.getFrameworkQuery(oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.SM_ONLY);
   var smScreen = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(smQuery);
   if(smScreen()){
     // open dialog
   } else {
     // show embedded 
   }

确切的逻辑取决于您的代码。是可观察的smScreen，因此您可以订阅它，并且在您的 HTML 模板中，只有当它smScreen为真或显示对话框时，您才能显示一些内容......

以下是有关 OJET 中的 ResponsiveUtils 的更多详细信息http://www.oracle.com/webfolder/technetwork/jet/uiComponents-responsiveoptions-optionfwkquery.html