javascript - 自定义弹出窗口

Question

我已经为我的网页创建了一个设计。我面临的问题是我不确定如何使用我的设计创建较小的弹出窗口。

一旦我单击图像并在其上显示带有特定信息的图像，该窗口就会打开。

我不确定我是否需要某种 JavaScript 对象来保存他们的信息。

这是我开始的地方，但我迷路了。我需要基于其被点击的图像。因此，要显示对象，我需要根据我点击的图像来显示它，但不确定如何显示。

下面是我的设计。

function Cupcakes(type, name, description, Price, cost, image){
    this.type = type; //create an instant of object
    this.name = name;
    this.description = description;
    this.Price = Price;
    this.cost = cost;
    thi.image = image;
    this.displayInfo = function(){
      var info ="<div class='divCell1' id = 'line1'>";
      info += this.name + "</div><div class='divCell2' id = 'line2'>";
      info += this.description + "</div><div class='divCell3' id = 'line3'>";
      info += this.Price + "<div>Price <br>";
      info += this.cost + "</div><div class = 'divCell4' id='line4'>";
      info += this.image + "</div>";
      return info;
    }   
}

// define an array to store products
var product_list = [];
var cart = [];
var cost = "Half Dozen: $7.00 <br> Dozen:  $12.50 <br> Party Size [20 cupcakes]:  $18.00"
var desc1 = ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci elit, lobortis nec neque in, condimentum gravida velit. Suspendisse maximus nisl et vehicula placerat. Sed elit turpis, venenatis sit amet tortor vel, interdum cursus mi.';  
var image = " ";
var product = new Products('cupcake','Winter Festival', desc1, 15.99);
product_list.push(product);

Answer 1

默认情况下，浏览器会阻止弹出窗口。请改用带有 position:fixed 的 div。您可以使用 display:none/display:inline-block

隐藏/显示它

function show(){
var stats =  document.getElementById("aa").style.display;
  
if (stats == "none"){  
document.getElementById("aa").style.display = "inline-block";
} else {
document.getElementById("aa").style.display = "none";  
}
}

body {
height: 100%;
background: honeydew;
}

#aa {  
  font-weight: bold;
  position:fixed;
  left:0;
  right:0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100px;
  height: auto;
  padding: 15px;  
  background: gold;
  text-align: center;
  box-sizing: content-box;
  border: 4px dashed black;
}

button {
  margin-right: 10px;
  float: left;
  color: white;
  background: crimson; 
  padding: 15px;
}

#text {
  text-align: justify;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

<div id=text><button onClick=show()>click</button> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.</div>
<div id=aa style="display:none">CONTENT</div>