如何使用来自不同视图页面的模式框在点击功能内部工作答案

【问题标题】：How to use modal box from different view page to work inside on click function如何使用来自不同视图页面的模式框在点击功能内部工作
【发布时间】：2018-12-20 21:37:48
【问题描述】：

$(".event_over_time").click(function()
 {  
//i want the modal box to be opening up on this click function here
 });

模式框在点击我网站的不同页面时打开我希望在我网站的不同页面上为点击功能打开相同的模式框基本上是通过点击功能查看模式框的快捷方式

【问题讨论】：

嗨，欢迎来到堆栈溢出。请参阅How to Ask 链接以获取有关如何提出问题并相应更新您的问题的更多详细信息。

标签： javascript cakephp-1.3

【解决方案1】：

首先，您必须确保您的模态 HTML 代码位于页脚中，以便将其加载到您网站的所有页面上。接下来，您必须为模态框提供一个 id，以便我们可以在 click 函数中使用它（我在示例中使用了 #modal）。

由于您使用的是 jQuery，您可以使用函数 .fadeIn 将模态从 display: none; 转换为 display: block;

函数看起来像这样：

$('.event_over_time').on('点击', function(e) { // 防止使用默认值，因此您也可以在不执行 href 的情况下将 ID 提供给锚标记 e.preventDefault(); // 这里我们使用 jQuery .fadeIn 函数来显示模态。 $('#modal').fadeIn(200); });

如果你想创建一个关闭模态的函数，你可以执行下面的代码，并确保模态中有一个 ID 为 #closeModal 的关闭按钮。

$('#closeModal').on('click', function(e) { // 防止使用默认值，因此您也可以在不执行 href 的情况下将 ID 提供给锚标记 e.preventDefault(); // 这里我们使用 jQuery .fadeOut 函数再次隐藏模态框。 $('#modal').fadeOut(200); });

【讨论】：