自定义弹出窗口

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将收到正确的信息。

这对您有用吗？

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