Forum for discussing general topics related to Couch.
3 posts Page 1 of 1
Hi!

I'm stuck on jquery (as always it seems).

I'm having a campaign landing-page that i'm temporary showing as a modal window instead of the frontpage. I'm using a (well-documented) jquery-plugin (https://github.com/humaan/Modaal)

Everything works fine, but... me (the operator) has halted, and i do have a lot of coffee that i can locate, but... it doesn't help.

I need to close the modal window after the "order"-button has been clicked and the user has been taken to the pre-order site i'm sending them to...

I have added the jquery code on the index-php to open the modal window (In addition to that i'm also calliing the plugin's initialization-script). (The sessionstorage is used to only show the popup-window once per session)

Code: Select all

<!DOCTYPE html>
<html>
   <head>
      
       <script src="jquery-3.5.1.min.js"></script>

   </head>
   <body>
   
        <div class="mytest"></div>

<!-- Campaign landing page -->
<script type="text/javascript">

$(document).ready(function() {
    if (typeof window.sessionStorage != undefined) {
        if (!sessionStorage.getItem('mySessionVal')) {
         jQuery(".mytest").modaal({
               type: 'iframe',
               fullscreen: 'true',
               content_source: 'landing_page_bc.html',
               accessible_title: 'iFrame modal title'
            });

                    jQuery('.mytest').modaal('open');

            sessionStorage.setItem('mySessionVal', true);
            sessionStorage.setItem('storedWhen', (new Date()).getTime());
        }
    }
});

</script>


<script src="source/js/modaal.js" type="text/javascript"></script>

   </body>
</html>



The 'landing_page_bc.html' is just a simple html-page with an image and a button

Code: Select all
<h2>PRE-ORDER NOW!</h2>
               
<style type="text/css">
         h1.logo {background:url("images/bandcamp-logotype-color-128.png") no-repeat center center;}
  </style>
                  
<h1 class="logo" title="Pre-order the album on Bandcamp">               
   <a href="https://bandcamp.com/" id="btnClosePopup" style="display:block; height:80px; width:350px; text-indent:9999px;">Order</a>
</h1>


The documentation of the modal window plugin says that the window is supposed to be able to be closed with

Code: Select all
$('.mytest').modaal('close')


and i really would like the modal window to close after they have clicked the order-button.

That's where i'm stuck. I've tried so many versions, but i can not get it to work!
Can anybody help me out, please ?

I hope you got unstuck with this by now, but here's what it looks like to me:

$('.mytest').modaal('close') is the action you want to take. But you need a listener on the button to fire that action on the click event.

One way is to add the listener to the <a> tag markup.
Code: Select all
<a href="https://bandcamp.com/" id="btnClosePopup" style="display:block; height:80px; width:350px; text-indent:9999px;" onclick="$('.mytest').modaal('close');" >Order</a>


To take it out of the markup the construction is going to be something like this. (I hope this is right. I'm doing this off the top of my head without testing it.)
Code: Select all
Element.Event.Element.Action


So...
Code: Select all
$('#btnClosePopup').click.$('.mytest').modaal('close')


I hope that works for you. Or at least helps in some way.

Hei, @Tim I'm so thankful for your answer, which gave me some ideas to try, but still i could not get it to work.
I believe that it's something to do with that i cannot call directly,

$('.mytest').modaal('close')

for some reason i don't know, perhaps it needs to be added owner of the window or something?

I tried adding to before the body-end some alternatives but was unsuccessful

Code: Select all
         $(document).ready(function(){
               $('#btnClosePopup').on('click', function() {
               $('.mytest').modaal('close');
               });
             })


and

Code: Select all
       $(document).ready(function(){
               $("#btnClosePopup").click(function(){                
               $('.mytest').modaal('close');
               });
             });

and

Code: Select all
  $(document).ready(function(){
               ('#btnClosePopup').click.$('.mytest').modaal('close');
             });


I know, i know, jQuery is supposed to be "easy", but i never seem to get it right anyway :)

Well since i cannot seem to solve this, i will keep the iframe open.

it seems in my experiments as if one still can go on and use bandcamp and order there while "in the iframe". Paypal will make sure the window is "broken". (Let me know if this is "wrong" from useability perspective though, pls!)

I will continue without this function, and let them have to close the window themselves which will "return" showing the normal index-page
3 posts Page 1 of 1