-1

请问如何在 HTML5、JavaScript 中生成无框窗口？

我在网上搜索，发现主要是使用库的链接。我希望从头开始开发自己的无框窗口，而不使用第三方库。

无框窗口是指没有框架、没有状态栏、没有默认最小化按钮、没有默认关闭按钮、没有滚动条的窗口……它看起来像一个带有绘制关闭按钮的独立图像。

有人会这么好心并为我提供大多数浏览器都会接受的想法或代码吗？

例子：

正如你们中很少有人问的那样，我的意思是什么，我在Rapidshare找到了一个很好的例子。屏幕中间有一个蓝色/橙色的大按钮，上面写着Upload。请按一下，就会出现一个无框窗口。

该窗口正是我想要实现的目标。在显示放大图像或提示登录信息等时，我已经看过很多次了。我也喜欢与显示该窗口相关的动画。

4

3 回答 3

1

没有框架

这是您在文档中是否使用 (i) 框架的决定

没有滚动条

使用 CSS，您可以抑制滚动条，或构建完全调整为窗口大小的布局

没有状态栏，没有最小化，没有关闭，没有滚动条......

在使用window.open创建弹出窗口时，使用 chrome-feature 描述符可以做到这一点。但是，您将无法创建不可关闭的窗口，隐藏关闭按钮也需要一些权限。

您似乎想要一个全屏应用程序。您是否考虑过使用新的全屏 API？

于 2012-05-16T21:20:19.120 回答
1

只是为了快速展示这个概念..

直接在body下创建两个div

  <div id="backmask"></div>
  <div id="contentwindow"></div>

  <!-- somewhere else in your page -->
  <a href="somepage.html" class="showinwindow">click me</a>

这些的 css （大致）

  <style type="text/css">

    #backmask { 
      display:block; 
      width:100%;
      height:100%;  
      background-color:black;
      position:absolute; top:0; left:0;
      z-index:1000;
      display:none;

      opacity:0.7;
      filter:alpha(opacity=70);
     }

    #contentwindow { 
      display:block; 
      width:800px;
      height:600px;  
      background-color:white;
      position:absolute; top:50px; left:50px;
      z-index:1001;
      display:none;
     }

    .bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
  </style>

然后（我使用 jquery 进行快速操作）

   <script type="text/javascript">

   $(".showinwindow").click( function(e) {

   /* we don't want the visitor to leave, stop the normal action */
   e.preventDefault();

   /* get what to show */
    var contenttoload = $(this).attr.("href");

  /* set the body up */
  $("body").addClass("bodywithwinOpenClass");

   /* show wins and masker */
   $("#backmask").css("display","block");
   $("#contentwindow").css("display","block");

  /* load the content  */
  $("#contentwindow").load(contenttoload);

   });
   </script>

这只是直接输入并没有运行，不包含糖果（用于定位等）希望它解释了所有插件背后的概念等你会发现

  • 相反需要“关闭”它
于 2012-05-16T21:25:37.937 回答
0

http://www.codelifter.com/main/javascript/amazingframelesspopup1.html <-- 几乎涵盖了你能做的所有事情——你不能从网页启动无铬浏览器窗口。

你想达到什么目的？

这很容易——它不是一个窗口——它实际上是页面上的一个 div，它漂浮在页面内容的其余部分之上——有很多方法可以使用像 jQuery 这样的框架来实现。

教程

基本上你所需要的只是一个具有高z-index的隐藏定位 div和一些脚本来显示/隐藏它：

<div id="popup" style="z-index:1000;display:none;position:absolute;top:100px;left:100px;">Some content</div>

<button onclick="document.getElementById('popup').style.display='block';">Open</button>
<button onclick="document.getElementById('popup').style.display='none';">Close</button>
于 2012-05-16T21:12:30.727 回答