Question

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

以下是示例：http://canvasjs.com/javascript-charts/。正如我们所看到的，当我们点击＆＃34;简单列图表＆＃34;图像，出现某种窗口（但它不是我认为的浏览器窗口），以及这个新窗口中所需的图表。

所以我的问题是，当用户点击某些元素和窗口（而不是浏览器窗口）时，如何显示某些元素（图表，在这种情况下）？

Answer 1

对我来说，这是一个非常基本的朋友：

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

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

使用html / css。

有更多的方法可以做到这一点，但在我看来，使用jQuery是最快和最简单的。 fadeIn和fadeOut是开箱即用的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();
  })

});

JavaScript的。打开一些内容的窗口

1 个答案: