开发者

Need help with a Session Script, Show JQModal Pop-up only Once

开发者 https://www.devze.com 2023-03-19 22:21 出处：网络
I have a JQModal alert that needs to come up when a client\'s site is first accessed, but not show again when the index page is accessed again from inside the site. I\'m not real far along in setting
相关专题：javascriptphp

I have a JQModal alert that needs to come up when a client's site is first accessed, but not show again when the index page is accessed again from inside the site. I'm not real far along in setting up session cookies so I'll be needing some explicit help, if that's possible. I've set up a short page with the vitals on it to test with: The URL is http://www.caycecookbook.com/pop_ups/jqm_onDocReady/code.php. I'm attaching the code here.

<?php session_start();
  if( $_SESSION['visited'] ){
      //don't show the modal box
  } else {
      $_SESSION['visited'] = true;
     //show modal box;
  }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1         /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Cayce CookBook</title>

<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->


<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
    loaded offscreen, and thus cached. Caching CSS created with the help of;
    Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
     div.imgCache { position: absolute; left: -8000px; top: -8000px; }
     div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */ 
.jqmWindow {
    display: none;
    position: fixed;
    top: 5%;
    left: 50%;
    margin-left: -265px;
    width: 530px; 
    /*width: auto;*/
    background-color:#777777;
    color: #333;
    border: 1px solid black;
    padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<开发者_Go百科/head>

<body>

<script type="text/javascript"> 
    $(document).ready(function() {
        $('#rename').jqm();
        $('#rename').jqmShow(); // This is the line you need to add.
    });
</script> 
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg"     width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;"><a href="#"     class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica,     verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a></p></td></tr>
</table>
</div>

</body>
</html>

You can't control js/html/css behavior explicitly from PHP.
You have two options

1) Don't include the javascript for modal box if $_SESSION['visited'] is true

2) Echo true/false from $_SESSION['visited'] to javascript code and do a logic there

Code for first option:

<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1         /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Cayce CookBook</title>
<?php
if( $_SESSION['visited'] ){

} else {
  $_SESSION['visited'] = true;
 ?>

 <!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
 <!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
 <script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
 <script type="text/javascript" src="scripts/jqModal.js"></script>
 <style type="text/css">
 /* Optional: image cacheing. Any images contained in this div will be
loaded offscreen, and thus cached. Caching CSS created with the help of;
Klaus Hartl <klaus.hartl@stilbuero.de> */
 @media projection, screen {
 div.imgCache { position: absolute; left: -8000px; top: -8000px; }
 div.imgCache img { display:block; }
 }
 @media print { div.imgCache { display: none; } }
 </style>
 <style type="text/css">
 /* jqModal base Styling courtesy of;
   Brice Burgess <bhb@iceburg.net> */

 /* The Window's CSS z-index value is respected (takes priority). If none is supplied,
   the Window's z-index value will be set to 3000 by default (in jqModal.js). You
   can change this value by either;
     a) supplying one via CSS
     b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */ 
 .jqmWindow {
     display: none;
     position: fixed;
     top: 5%;
     left: 50%;
     margin-left: -265px;
     width: 530px; 
     /*width: auto;*/
     background-color:#777777;
     color: #333;
     border: 1px solid black;
     padding: 0px;
 }
 .jqmOverlay { background-color: #000; }
 /* Fixed posistioning emulation for IE6
      Star selector used to hide definition from browsers other than IE6
      For valid CSS, use a conditional include instead */
 * html .jqmWindow {
      position: absolute;
      top: expression((document.documentElement.scrollTop || document.body.scrollTop) +           Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100)      + 'px');
 }
 </style>
 <!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
 <!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->

<?php
}
?>



 <!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
 <!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
 <link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
 <script src="scripts/main.js" type="text/javascript"></script>
 <!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
 <!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
 </head>

 <body>

 <script type="text/javascript"> 
     $(document).ready(function() {
         $('#rename').jqm();
         $('#rename').jqmShow(); // This is the line you need to add.
     });
 </script> 
 <!-- POP-UP DIV -->
 <DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
 <TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0"      bgcolor="#7777777">
 <TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img      src="images/hey_there.jpg"     width="504" height="360" border="0"></p></td></tr>
 <TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;"><a href="#"     class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica,     verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a></p></td></tr>
 </table>
 </div>

 </body>
 </html>

Replace below code in your file in below code i changed 3 things.

1> position of php code. I put php code at the end of file

2> Cookie rather than session

3> javascript popup opning code has some changes

Please apply below file after still you have some problem than let me know your prob.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1         /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Cayce CookBook</title>

<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->


<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
    loaded offscreen, and thus cached. Caching CSS created with the help of;
    Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
     div.imgCache { position: absolute; left: -8000px; top: -8000px; }
     div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */
.jqmWindow {
    display: none;
    position: fixed;
    top: 5%;
    left: 50%;
    margin-left: -265px;
    width: 530px;
    /*width: auto;*/
    background-color:#777777;
    color: #333;
    border: 1px solid black;
    padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
</head>

<body>

<script type="text/javascript">
    <?php if( !isset($_COOKIE["visited"]) || $_COOKIE["visited"] != true ): ?>
        $('#rename').jqm();
        $('#rename').jqmShow(); // This is the line you need to add.
    <?php endif; ?>
</script>
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg"     width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;"><a href="#"     class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica,     verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a></p></td></tr>
</table>
</div>
<?php
    if( !isset($_COOKIE["visited"]) || $_COOKIE["visited"] != true )
    {
        $expireTime = time() + (60 * 60 * 24 * 1);
        // Set cookie for 1 day or 24 hour from current time
        setcookie("visited", true, );
    }
?>
</body>
</html>
0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

关注公众号

热门标签

图文推荐

Delphi - Custom drawing a message list

Delphi - Custom drawing a message list
C++ header-only include pattern

C++ header-only include pattern
IE7 Margin Collapses Into Padding

IE7 Margin Collapses Into Padding
in CoffeeScript, how can I use a variable as a key in a hash?

in CoffeeScript, how can I use a variable as a key in a hash?
Interactive visualization of a graph in python [closed]

Interactive visualization of a graph in python [closed]
How to customise PHP MYSQL tables?

How to customise PHP MYSQL tables?
High quality, simple random password generator

High quality, simple random password generator
Image Recognition ApI in android

Image Recognition ApI in android

开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9