全屏窗口，全新体验！助力用户尽享沉浸式页面

一个交互式页面，通常需要灵活的窗口展示方式，以提升用户体验。移动端的全屏窗口组件，就是这样一种窗口解决方案。它能够让页面元素占据整个屏幕空间，让用户更专注于页面内容。本文将介绍如何封装一款全屏窗口组件，并探索js调用popupFullBox方法的奥秘。

js封装全屏窗口组件

首先，创建一个js文件，并将以下代码放入其中：

function popupFullBox(title) {
  var title = title || "";
  var html = '<div id="fullBox" class="full-box">' +
      '<div class="full-box-header">' +
      '<span class="full-box-title">' + title + '</span>' +
      '<span class="full-box-close" onclick="closeFullBox()"></span>' +
      '</div>' +
      '<div class="full-box-content">' +
      '</div>' +
      '</div>';
  var body = document.body;
  body.insertAdjacentHTML('beforeend', html);
  var fullBox = document.getElementById('fullBox');
  fullBox.style.display = 'block';
  fullBox.style.opacity = 1;
}

function closeFullBox() {
  var fullBox = document.getElementById('fullBox');
  fullBox.style.opacity = 0;
  setTimeout(function() {
    fullBox.style.display = 'none';
  }, 300);
}

这个js文件定义了popupFullBox函数和closeFullBox函数。popupFullBox函数负责创建全屏窗口，closeFullBox函数负责关闭全屏窗口。

接下来，在html页面中引用这个js文件，并在需要创建全屏窗口的地方添加以下代码：

<a href="javascript:void(0);" onclick="popupFullBox('全屏窗口标题')">点击打开全屏窗口</a>

点击这个链接，就会创建一个全屏窗口，标题为“全屏窗口标题”。

popupFullBox方法详解

popupFullBox方法接收一个参数title，表示全屏窗口的标题。如果省略这个参数，则使用默认标题“全屏窗口”。

popupFullBox方法首先创建一个html字符串，其中包含了全屏窗口的结构。然后，将这个html字符串插入到body元素的末尾。

接下来，获取全屏窗口的元素，并将其显示出来。

关闭全屏窗口

要关闭全屏窗口，可以点击全屏窗口右上角的关闭按钮，也可以调用closeFullBox函数。

closeFullBox函数首先将全屏窗口的透明度设置为0，然后使用setTimeout函数延迟300毫秒，再将全屏窗口的display属性设置为none，这样全屏窗口就会从页面中消失。

结语

全屏窗口组件是一种非常实用的组件，可以用来展示图片、视频、表单等内容。通过封装js的popupFullBox方法，我们可以轻松地创建和关闭全屏窗口。

希望本文对你有帮助。如果您有任何问题，请随时留言。