javascript html 弹出窗口答案

【问题标题】：javascript html popup windowjavascript html 弹出窗口
【发布时间】：2022-04-15 02:50:56
【问题描述】：

我是 javascript 的初学者。我想要做的是当我点击一个按钮时：

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

然后，当您单击下一步时，它会滚动到下一个电影列表。最简单的 javascript/jQuery 库是什么？

此图片的 sn-p 取自网站 getglue。我试图启动该站点，但似乎找不到执行此操作的 js 代码。

重要提示： 电影标题和图像取自数据库，因此内容不是静态 html。这就是我实际上对如何做一个动态内容生成的窗口弹出框感到困惑的地方

【问题讨论】：

当你说“弹出一个窗口”时，你的意思是一个新的浏览器窗口吗？还是您的意思是lightbox effect？
类似灯箱效果的东西，问题是这些电影是从数据库中提取的，因此需要 php 代码......灯箱效果会起作用吗？

标签： php javascript jquery

【解决方案1】：

这是一个关于 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/

【讨论】：

是的，该窗口的内容是静态 HTML。我想要一个动态的，因为电影标题是从数据库中提取的
哦，对了，我忘了你是个初学者。对不起。您使用 AJAX。我添加了一个链接来帮助学习 AJAX

【解决方案2】：

jQuery UI 是此类事情最流行的工具之一。您可以使用它们have a dialog 来实现这种效果。

【讨论】：

【解决方案3】：

给按钮一个带有id属性的id，然后在按钮在HTML中的位置之后使用这个JavaScript代码：

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

【讨论】：

【解决方案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.");
    }
});

【讨论】：

那么在我的下一个按钮中，我应该放什么js？
我无法想象您的构建是什么，也许您的查询将选择所有列出的电影？如果是然后限制它们，例如第一页列表是 0-10，第二页是 11-20 等等（使用 $.post() 调用它们）
介意用那个 $.post 给我一个代码 sn-p 吗？是的...我将其限制在 0-10 等

【解决方案5】：

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

它应该居中显示，并使用大号 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 提供支持。

【讨论】：