JavaScript HTML 弹出窗口

Question

我对JavaScript还是新手。我想做的是当我点击一个按钮时：

我希望它弹出一个窗口。这个窗口的内容是HTML代码（实际上是.php文件）。如下所示：

然后当你点击下一步时，它会滚动到下一个电影列表。哪个是最容易的JavaScript/jQuery库来实现这个功能？

这段图片摘自getglue网站。我试图使用firebug查找该网站的js代码，但似乎找不到。

重要提示： 电影标题和图片来自数据库，因此内容不是静态的HTML。这就是我在如何创建动态内容生成的弹出框方面感到困惑的地方。

- aherlambang

---

当你说“弹出窗口”时，你是指一个新的浏览器窗口吗？还是指灯箱效果？ - Hubro

类似灯箱效果，问题在于这些电影是从数据库中拉取的，因此需要使用 PHP 代码... 灯箱效果能行吗？ - aherlambang

Answer 1

jQuery UI是最受欢迎的IT技术工具之一。他们有一个对话框，可以用来实现这个效果。

- ataddeini

Answer 2

这是一篇关于使用jQuery（编写js的唯一方法）制作弹出窗口的精彩教程。 http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/ 还有一篇AJAX教程。 http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

- ohmusama

---

是的，那个窗口的内容是静态的 HTML.. 我想要一个动态的窗口，因为电影标题是从数据库中获取的。 - aherlambang

哦，对了，我忘记你是个初学者。抱歉。你使用 AJAX。我添加了一个链接来帮助你学习 AJAX。 - ohmusama

Answer 3

给按钮添加一个ID属性，然后在HTML中的按钮位置之后使用以下JavaScript代码：

document.getElementById('the_button_id').addEventListener('click', function() {
    window.open('page_to_open', '');
}, false);

- Delan Azabani

Answer 4

就像Matt Ball在使用lightbox / fancybox（弹出您的表单）时所说的那样。 之后，如果您想让下一个按钮滑动到下一个列表，请首先确保电影列表部分位于具有ID的div内，然后使用jqueryui事件，如下所示：

$("#idofyourcurrentlist").hide("slide", { direction: "left" }, 1000);
$("#idofyournextlist").delay(1000).show("slide",{direction: "right"}, 1000);

祝你好运。

按要求：

var getdata = "something that  u need";
var datatopost = "yourneed=" + getdata;
$.post("tophphandling.php",datatopost,function(success){
    if(success){
       alert("Thank you.");
    }
});

- Eric T

---

那么在我的下一个按钮中，我应该放什么JS代码？ - aherlambang

我无法想象你的构建是什么，也许你的查询将选择所有列出的电影？如果是这样，那么请对它们进行限制，例如第一页列表为0-10，第二页为11-20，依此类推（使用$.post()调用它们）<<==== Ajax Method in Jquery。 - Eric T

能否帮我写一个使用$.post的代码片段？是的，我会将其限制在0-10等范围内。 - aherlambang

Answer 5

使用 details 元素的纯 HTML 弹出窗口。

它应该居中显示，并使用大型 outline 使整个页面变暗。

.popup > p {
    padding: 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 25vw
}
.popup summary {
    padding: 1rem 0.5rem;
    cursor: pointer;
    max-height: 90vh;
    overflow: auto
}
.popup[open] summary {
    background: black;
    color: white;
    padding: 0.5rem;
}

.popup[open] {
    position: fixed;
    /* top: calc(50% - 25vw); */
    left: calc(50% - 15vw);
    outline: 5000px #00000090 solid;
    border: 5px red solid;
    border-radius: 0.5rem;
    z-index: 1;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden
}

.popup[open] summary::after {
    content: '❌';
    float: right;
}

<details class="popup">
  <summary>HTML popup</summary>
    <p>
      <span>Name</span>
      <input value="HTML"/>
      <br>
      <span>Difficulty</span>
      <input type="number" value="3"/>
      <br>
      <span>Coolness</span>
      <input type="number" min="0" max=8 step="1" value="97" />
      <br>
      <p><span>Powered by HTML</span></p>
    </p>
</details>

由HTML提供支持。

- NVRM