Need a simple popup (modal, on-page-load with time-delay, fast & clean)

Please format your code (by enclosing it in three backticks)

Done:)

1 Like

sorryy for the troube , i got it.ok thankss

Ok, so you have two pages, index.html and content.html. You are using colorbox to open the second page in a popup window from within the first.

The second page has two buttons “Post Properties Free” and “Post Requitrements Free”.

When you click the button “Post Properties Free”, you want the popup to close and for the original page (index.html) to redirect to http://www.plotmall.com/list-requirements.php

Did I get that right?

yesss…but in this the url is running inside thepopup window

So When you click the button “Post Properties Free”, you want the popup window to stay open and to load http://www.plotmall.com/list-requirements.php

Correct?

no, i wat the popup window to close.and to load the url

So what I said in post #190 then?

yes i need that

You can just do this.

  <a id="btnClose" href="http://plotmall.com/list-plot.php" target="_parent">

No need to include colorbox, or any JavaScript in content,html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Content Window</title>
  <style>
    input{
      width:230px;
      height:50px;
      background:#093;
      border-radius:8px;
      color:#FFF;
      font-size:18px
    }
  </style>
</head>

<body>
  <div style="width:50%; float:left">
    <div align="center" style="margin-left:10px; padding-top:50px">
      <h1>Realestate Owners, Developers and Brokers.</h1>
      <a id="btnClose" href="http://plotmall.com/list-plot.php" target="_parent">
        <input type="button" value="Post Properties Free">
      </a>

      </div>
    </div>
    <div style="width:50%; float:right">
      <div align="center" style="margin-right:10px; padding-top:50px">
        <h1>Want To Buy/Rent Flat, Villas and Commercial Spaces.</h1>
        <a  href="http://www.plotmall.com/list-requirements.php">
          <input type="button" value="Post Properties Free">
        </div>
      </div>
  </body>
</html>

thank you so much sir

1 Like

hi pullo,

i want this welcome javascript code show to visitor only once pre in 24 hour.

tnx

<!-- Welcome Message  -->
<style>.cookie-notification-jc > div {background: none repeat scroll 0 0 #FFFFFF;border: 0 solid #FF0000;bottom: 10px;box-shadow: 0 0 15px #000000;float: right;padding: 30px 15px 15px;position: absolute;right: 10px;width: 260px !important;}.bottom {bottom: 0;left: 0;position: fixed;right: 0;}.cookie-notification-jc {color: #FFFFFF;display: block;height: 100%;left: 0;line-height: 1.4em;padding: 0;position: fixed;top: 0;z-index: 1000000;}.cookie-notification-jc-accept {background: url("http://www.bitc.ie/wp-content/themes/bitc2013/images/closebox.png") no-repeat scroll left top rgba(0, 0, 0, 0);float: left;font-size: 0;height: 30px;left: -33px;margin-right: -30px;overflow: hidden;padding: 0;position: relative;text-indent: -50em;top: -43px;width: 30px;}.cookie-notification-jc-details {color: #EC068D;font-size: 0.9em;padding: 0;transition-duration:1s;}.cookie-notification-jc-details a {color: #BBBBBB;text-decoration: none;color: #ED2025;}.cookie-notification-jc-details a:hover {color: #FFA900;}</style>
<script>function closeBox(toClose) {document.getElementById(toClose).style.display = "none";}</script>
<div id="cookie-notification-jc" class="cookie-notification-jc bottom" style="background-color: rgba(30, 30, 30, 0.2);">
    <div style="width:95%; margin: 0 auto;">
    <span style="cursor: pointer;" onclick="closeBox('cookie-notification-jc'); return false;" class="cookie-notification-jc-accept">Continue</span>
        <h2 style="margin: -5px 0px 0px ! important; font-weight: bold; color: black; float: right; direction: rtl;">my site</h2><br>
           <p style="color: rgb(112, 112, 112); float: right; direction: rtl;">welcome<br><br>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir">enter</a></span>
        <span class="cookie-notification-jc-details"> - </span>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir/page/Friends">Link Exchange</a></span>
        </p>
    </div>
</div>
<!-- end of Welcome Message  -->

hi pullo,

i need different popups as images with different time set?

Set a cookie which was valid for 24 hours, then check for the cookie’s presence on page load.
Posts #14 and #18 have solutions for this

Do you? What have you tried?

Mr pullo please help me i dont understand how to set a cookie in that welcome code.

thank you

Tray reading this and let me know where you get stuck: https://www.sitepoint.com/how-to-deal-with-cookies-in-javascript/

You can also look at this: https://github.com/js-cookie/js-cookie

its my welcome code

<!-- Welcome Message  -->
<style>.cookie-notification-jc > div {background: none repeat scroll 0 0 #FFFFFF;border: 0 solid #FF0000;bottom: 10px;box-shadow: 0 0 15px #000000;float: right;padding: 30px 15px 15px;position: absolute;right: 10px;width: 260px !important;}.bottom {bottom: 0;left: 0;position: fixed;right: 0;}.cookie-notification-jc {color: #FFFFFF;display: block;height: 100%;left: 0;line-height: 1.4em;padding: 0;position: fixed;top: 0;z-index: 1000000;}.cookie-notification-jc-accept {background: url("http://www.bitc.ie/wp-content/themes/bitc2013/images/closebox.png") no-repeat scroll left top rgba(0, 0, 0, 0);float: left;font-size: 0;height: 30px;left: -33px;margin-right: -30px;overflow: hidden;padding: 0;position: relative;text-indent: -50em;top: -43px;width: 30px;}.cookie-notification-jc-details {color: #EC068D;font-size: 0.9em;padding: 0;transition-duration:1s;}.cookie-notification-jc-details a {color: #BBBBBB;text-decoration: none;color: #ED2025;}.cookie-notification-jc-details a:hover {color: #FFA900;}</style>
<script>function closeBox(toClose) {document.getElementById(toClose).style.display = "none";}</script>
<div id="cookie-notification-jc" class="cookie-notification-jc bottom" style="background-color: rgba(30, 30, 30, 0.2);">
    <div style="width:95%; margin: 0 auto;">
    <span style="cursor: pointer;" onclick="closeBox('cookie-notification-jc'); return false;" class="cookie-notification-jc-accept">Continue</span>
        <h2 style="margin: -5px 0px 0px ! important; font-weight: bold; color: black; float: right; direction: rtl;">my site</h2><br>
           <p style="color: rgb(112, 112, 112); float: right; direction: rtl;">welcome<br><br>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir">enter</a></span>
        <span class="cookie-notification-jc-details"> - </span>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir/page/Friends">Link Exchange</a></span>
        </p>
    </div>
</div>
<!-- end of Welcome Message  -->

where i should set a cookie?

i have tried your previous code but it shows just one image . how to get display different images at diff time.pls help.thnx

Slider?