Question

如何在HTML5，JavaScript中生成无框窗口？

我搜索了网页，发现了大多数使用图书馆的链接。我希望从头开始开发自己的无框窗口，而不使用第三方库。

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

任何人都会如此友善并向我提供大多数浏览器都会接受的想法或代码吗？

实施例

很少有人问，我的意思是什么，我在Rapidshare找到了一个非常好的示例。屏幕中间有一个大的蓝色/橙色按钮，表示上传。请按下它，然后会出现一个无框窗口。

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

Answer 1

没有框架

您决定在文档中使用（i）框架

没有滚动条

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

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

使用window.open创建弹出窗口时，可以使用chrome-feature描述符。然而，您将无法创建不可关闭的窗口，隐藏关闭按钮requires some privileges。

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

Answer 2

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

直接在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>

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

需要反向“关闭”

Answer 3

http://www.codelifter.com/main/javascript/amazingframelesspopup1.html＆lt; - 几乎涵盖了您所能做的一切 - 您无法从网页启动无边框浏览器窗口。

你想要达到什么目标？

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

Tutorial

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

<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>

HTML，JavaScript：无框架Windows

实施例

3 个答案: