Setting Plone Mockup Modal to set cookie on close

Plone Support Theming
1

Hey all,

I'm trying to use a plone mockup modal window on my theme. I can get the modal to display no problem.

I have a 'Close' button within my content on the modal. When a user clicks on that button I would like to set a cookie and close the window but am having no luck targeting that button from js.

For now, I am just trying to fire an alert when that button is pressed. I have a feeling that the modal loads after the rest of the document which is causing my disconnect.

The following html and script loads the modal on page load:

<div id="siteNoticeModal" class="pat-plone-modal" style="display: none" data-pat-plone-modal="width: 400">
    <h1 class="documentFirstHeading  siteNoticeConsent">site NOTICE AND CONSENT BANNER</h1>
    <h3>This is a private site:</h3>
    <ul>
        <li>some notification</li>
    </ul>
    <button id="siteNoticeCloseBtn" class="plone-btn plone-btn-success">Close</button>
</div>
<div id="my-modal">
    <a href="#siteNoticeModal" style="display:none;" class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal" data-pat-plone-modal="title: site Consent Acknowledgement">Modal basic</a>
</div>

<script>
    // on close button click set cookie
    $(document).ready(function() {
        // if no cookie, fire off modal
        if (!Cookies.get('siteCHubNotice')) {
            setTimeout(function() {
                //$('#my-modal').modal();
                $("#my-modal .pat-plone-modal").click();
            }, 600);
        }
    });
</script>

I have tried adding the following to the script but cannot get it to work:

        $('#my-modal #siteNoticeCloseBtn').click(function() {
            alert('test');
        });

Any help would be appreciated. I've tried to read the docs for mockup but do not understand how I would acheive what I am trying to do.

Thanks for your patience.

2

This is a guess: but what if you moved the script inside the my-modal div. Do you get any javascript errors?

3

Thanks for the suggestion. I tried that but it did not work. I don't get any JavaScript errors in my dev console either.

4

Could you try:

$('#siteNoticeCloseBtn').click(function() {
alert('test');
});

5

I tried that as well with no luck.

If I move the button, that I am trying to capture the click function with, outside of the #siteNoticeModal div, the JS works and I get the alert. But for some reason, when the button is inside that div, it is not working.

This code works (shows the alert) when the button I am targeting is outside of the .pat-plone-modal div.

<div id="siteNoticeModal" class="pat-plone-modal" style="display: none" data-pat-plone-modal="width: 400">
    <h1 class="documentFirstHeading  siteNoticeConsent">site NOTICE AND CONSENT BANNER</h1>
    <h3>This is a private site:</h3>
    <ul>
        <li>some notification</li>
    </ul>
</div>
<div id="my-modal">
    <a href="#siteNoticeModal" style="display:none;" class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal" data-pat-plone-modal="['click #siteNoticeCloseBtn']; title: site Consent Acknowledgement">Modal basic</a>
</div>
<button id="siteNoticeCloseBtn" class="plone-btn plone-btn-success">Close</button>

<script>
    // on close button click set cookie
    $(document).ready(function() {
        // oif no cookie, fire off modal
        if (!Cookies.get('siteCHubNotice')) {
            setTimeout(function() {
                //$('#my-modal').modal();
                $("#my-modal .pat-plone-modal").click();
            }, 600);
        }
        $('#siteNoticeCloseBtn').click(function() {
            alert('test');
        });
    });
</script>