Question

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

在我网站的其他页面上单击时，模态框会打开，我希望在我网站上其他页面上的点击功能中打开相同的模态框，这基本上是通过单击功能来查看模态框的快捷方式< / p>

Answer 1

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

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

该函数将如下所示：

$('.event_over_time').on('click', function(e) {
    // Prevent default is used so you can also give the ID to a anchor tag without it executing the href
    e.preventDefault();
    // Here we use the jQuery .fadeIn function to show the modal.
    $('#modal').fadeIn(200);
});

如果要使函数关闭模式，可以执行以下代码，并确保模式中有一个ID为#closeModal的关闭按钮。

$('#closeModal').on('click', function(e) {
    // Prevent default is used so you can also give the ID to a anchor tag without it executing the href
    e.preventDefault();
    // Here we use the jQuery .fadeOut function to hide the modal again.
    $('#modal').fadeOut(200);
});

如何使用不同视图页面中的模态框在单击功能内工作

1 个答案: