JavaScript.打开包含一些内容的窗口

JavaScript. Opening window with some content

本文关键字：窗口 包含一 JavaScript      更新时间：2023-09-26

我是 JavaScript 的新手，所以我有一个问题。我试图谷歌，但没有找到任何信息。所以。我需要在新窗口中打开图表，但不是在浏览器窗口中，在某种自定义窗口中打开图表。那么这是什么想法。页面上有一些元素，例如图像。当用户单击它时，图表会出现在自定义窗口中。

下面是示例：http://canvasjs.com/javascript-charts/。正如我们所看到的，当我们单击"简单柱形图"图像时，会出现某种窗口（但正如我假设的那样，它不是浏览器窗口），并且这个新窗口中有所需的图表。

所以我的问题是，当用户单击某些元素和窗口（不是浏览器窗口）并出现某些内容（在这种情况下为图表）时，如何实现这样的事情？

这是我的朋友给你的一个非常基本的：

https://jsfiddle.net/ahmadabdul3/0eqwpwuz/1/

基本上是一个新的div，它position:fixed有背景。 以及其中新div 中的实际内容。

玩转HTML/CSS。

有更多的方法可以做到这一点，但在我看来，使用 jQuery 是最快、最简单的。 淡入和淡出是开箱即用的jQuery函数，因此您可以获得不错的淡入淡出效果。 否则，您可以将显示设置为阻止

.html：

<button class='open-modal'>
  open modal
</button>
<div class='modal-background'>
</div>
<div class='modal-box close-modal'>
  <div class='content'>
    modal
  </div>
  <div class='vertical-mid-hack'>
  </div>
</div>

.css：

.modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.7;
}
.modal-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.content {
  display: inline-block;
  vertical-align: middle;
  background-color: white;
  border-radius: 3px;
  padding: 10px;
  margin: 0 -2px;
}
.vertical-mid-hack {
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
}

.js：

$(function() {
    $('.open-modal').on('click', function() {
    $('.modal-background').fadeIn();
    $('.modal-box').fadeIn();
  });
  $('.close-modal').on('click', function() {
    $('.modal-background').fadeOut();
    $('.modal-box').fadeOut();
  })
});
相关文章：