当前位置： 文江博客话题详情

PHP 自定义模块显示 DIV 是否存在

发布于 2024-12-26 16:02:03 字数 3887 浏览 4 评论 0原文

我对 PHP 还很陌生，因此自定义现成的脚本还不是我的强项。

我有一个动画弹出模式脚本，当前在单击某个按钮时触发。我还想在页面上存在特定 div 时自动触发相同的脚本。

正如您从代码中看到的，#mask 是页面上的半透明黑色层。

这是我需要调整的脚本：

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

});

目前，单击此链接时它会自动打开：

<a href="#" name="modal">

我试图让它在页面上存在此 DIV 时自动运行：

<div name="showintrovideo"></div>

非常感谢大家，你们总是提供很大的帮助！

- - Andrew

编辑

这是我正在使用的完整代码：

HTML

<div id="boxes">
    <div id="qrcodemarketing" class="window">

        <!-- close button is defined as close class -->
        <div style="float:right;">
        <a href="#" class="close"><img src="images/close_window.png" width="22"height="22" alt="Close Window" /></a>
        </div>

        <iframe width="640" height="480" src="http://www.youtube.com/embed/MYVIDEO" frameborder="0" allowfullscreen></iframe><br /><b>Pause the video before closing this window</b>

    </div>
    </div>




    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <div id="mask"></div>

CSS

#mask {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:absolute;
  background:none;
  display:none;
  z-index:9999;
  padding:20px;
  color:#fff;
}

.js 文件

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });


    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

});

可以只调整 .js 文件，以便它也可以自动打开以及通过点击？

谢谢！

原文

I'm very new to PHP, so customizing ready-made scripts is no forte of mine quite yet.

I have an animated popup modal script, which currently triggers when a certain is clicked. I'd also like to trigger this same script automatically when a particular div exists on the page.

The #mask, as you can see from the code, is a translucent layer of black over the page.

Here's the script that I need to adjust:

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

});

Currently it opens automatically when this link is clicked:

<a href="#" name="modal">

And I'm trying to get it to run automatically when this DIV exists on the page:

<div name="showintrovideo"></div>

Thanks so much guys, you're always such great help!

- - Andrew

EDIT

Here's the full code I'm working with:

HTML

<div id="boxes">
    <div id="qrcodemarketing" class="window">

        <!-- close button is defined as close class -->
        <div style="float:right;">
        <a href="#" class="close"><img src="images/close_window.png" width="22"height="22" alt="Close Window" /></a>
        </div>

        <iframe width="640" height="480" src="http://www.youtube.com/embed/MYVIDEO" frameborder="0" allowfullscreen></iframe><br /><b>Pause the video before closing this window</b>

    </div>
    </div>




    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <div id="mask"></div>

CSS

#mask {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:absolute;
  background:none;
  display:none;
  z-index:9999;
  padding:20px;
  color:#fff;
}

.js file

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });


    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

});

It it possible to just tweak the .js file so that it can also open automatically as well as by click?

Thanks!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

国际总奸 2025-01-02 16:02:03

您可能最好使用会话或 cookie 来确定是否显示介绍视频。我还将您的弹出窗口包装在一个可以在 jQuery 元素上调用的方法中。这样

$('a').myPopupMethod();

，您也可以以编程方式调用它：

$.myPopupMethod();

在您的 HTML 页面中，您可以使用 PHP 来确定是否显示弹出窗口：

<?php
    session_start();

    $video_watched = $_SESSION['video_watched'];
?>
<!DOCTYPE html>
<html>
  <body>
    <script src="jquery.js"></script>
<?php if ($video_watched != true): ?>
    <script>
        $(document).ready(function() {
            $.myPopupMethod();
        });
    </script>
<?php endif; ?>
  </body>
</html>

You're probably best using a session or cookie to determine whether to show the intro video. I'd also wrap your popup in a method you can call on a jQuery element. Something like:

$('a').myPopupMethod();

That way, you can also call it programmatically:

$.myPopupMethod();

In your HTML page, you can then use PHP to determine whether to show your popup or not:

<?php
    session_start();

    $video_watched = $_SESSION['video_watched'];
?>
<!DOCTYPE html>
<html>
  <body>
    <script src="jquery.js"></script>
<?php if ($video_watched != true): ?>
    <script>
        $(document).ready(function() {
            $.myPopupMethod();
        });
    </script>
<?php endif; ?>
  </body>
</html>
回复 原文
~没有更多了~

关于作者

辞别

暂无简介

文章
评论
545 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

牛↙奶布丁

文章 0 评论 0

COSO

文章 0 评论 0

落叶

文章 0 评论 0

暗地喜欢

文章 0 评论 0

qq_i8qOEG

文章 0 评论 0

qq_Wl4Sbi

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文