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

单击图像并显示其图像及其特定信息后,窗口将打开。

我不确定是否需要某种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);


javascript - 自定义弹出窗口-LMLPHP

最佳答案

默认情况下,浏览器不会阻止弹出窗口。请使用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>

10-05 20:45
查看更多