自定义弹出 Window

Question

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

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

我不确定我是否需要某种 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: .00 <br> Dozen:  .50 <br> Party Size [20 cupcakes]:  .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

你的问题很混乱。

基础javascript（考虑jQuery）适合你：

您可以在它的元素上保存每个纸杯蛋糕的信息。像这样：

<div class="cupcake" data-price="Half Dozen: .00..." data-description="My description">
[...]
</div>

<div class="cupcake" data-price="Half Dozen: .00..." data-description="My description 2">
[...]
</div>

并在 jquery 中：

$(".cupcake").on("click", function(){
    var price = $(this).data("price"); //Getting the price information
    var desc = $(this).data("price"); //Getting the description information
    //Here you can use all information, call functions and show your small popup
});

根据您点击的 div，变量 price 和 desc 将收到正确的信息。

这对你有点用处？

如果需要，请编辑您的问题并尝试更具体一些，因为我不明白您真正的问题。（也许是我的英语）

Answer 2

默认情况下，浏览器会阻止弹出窗口。请改用 div 和 position:fixed。您可以 hide/show 使用 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>

Answer 3

带有隐藏复选框的纯 CSS 解决方案：

html {
  width: 100%;
  height: 100%;  
  background: lavender;
  text-align: center;
  font-family: arial, sans-serif;
}

input { 
  display: none;
}

#target { 
  display: none;
}

#click:checked ~ label > #target {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  height: 80%;
  width: 80%;
  background: url('http://i.imgur.com/bv80Nb7.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  outline: 6px double teal;
}

.item {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;  
  user-select: none;
  -webkit-user-select: none;  
}

#warning {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left:0;
  right:0;
  margin: auto;
}

<input type="checkbox" id="click" name="click" value="click" />

<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target class="item"><h1 id=warning>THE POP-UP CONTENT</h1></div>  
</label>

自定义弹出 Window

Custom Popup Window

html

javascript

css

object

popup