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>

Answer 2

带有秘密复选框的纯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>

Answer 3

你的问题非常混乱。

基本的javascript（考虑jQuery）：

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

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

<div class="cupcake" data-price="Half Dozen: $12.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会收到正确的信息。

这对你有用吗？

如果您愿意，请编辑您的问题并尝试更具体，因为我没有解决您的真正问题。（也许这是我的英文）

自定义弹出窗口

3 个答案: