Getting an aria-haspopup showing

Question

I've got a Shopify website and I want to borrow some code for a really good popup of terms and conditions, policies, etc. It's on the checkout page and this is what the code looks like...

<td nowrap class="tg-8jgo"><a aria-haspopup="dialog" href="/6007783493/policies/7893516357.html" data-close-text="Close" data-title-text="Terms of service" data-modal="policy-7893516357">Terms of service</a></td>

This is a link to the page (refunds, etc at the bottom) where it works, but when I put it onto a different page, I can't get it to work.

I've looked in other parts of the code that might refer to it, but can't find anything that is linked to it (i.e. the popup window), I've looked in js files attached to the page, can't find anything. Can't really find anything on the www either as it all seems to refer to aria code as being used for menus rather than a popup window.

It shows up the terms and conditions as a frame over the page and greys/blurs out the background. The window can then be closed simply with an ESC or close button.

Aaron · Accepted Answer · 2019-05-09T09:28:19.303

0

Since you couldn't provide any code and I don't quite get what you wanted to tell us here is my suggestion using bootstrap modal. You can simply click the X or anywhere outside the modal to close it. The background is blurred like you wanted it to be.

Edit: you can add modal-lg to the modal-dialog and make it bigger. Check this link for further information on how to work with modals: https://getbootstrap.com/docs/4.0/components/modal/

If you want to really customize your modal size, check this link: Modal width (increase)

$(document).ready(function() {
  $('#myModal').modal('show');
});

body.modal-open .supreme-container {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
}

.modal-lg {
    max-width: 100% !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="supreme-container">Page content

</div>
<div id="myModal" class="modal modal-lg" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" style="width: 800px" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        <p>TERMS OF SERVICE HERE</p>
      </div>
    </div>
  </div>
</div>

edited May 09 '19 at 09:28

answered May 08 '19 at 10:11

Aaron

1,600
1
8
14

Hi, sorry. I had pasted in the code, not sure what happened there, but this is the code... Refund policy – Patrick May 08 '19 at 11:55
This part shows they also use modals: data-moda. Test my code to see if this is the desired output. – Aaron May 08 '19 at 12:00
That's worked perfectly thank you! Took me a while, but managed to get the code importing the html from other files, but can't seem to change the size of the dialog box? Tried setting in the code you set up and in a style and a css, but can't get it to cover most of the screen (like about 90% high and 90%wide). I'm sure it's something easy!! – Patrick May 09 '19 at 08:44
You're a legend, thankyou! Was it just because you renamed the class? I tried adding in a style like that and it didn't work. It doesn't take %? – Patrick May 09 '19 at 09:18
modal-lg makes the modal bigger in general. You can override the default percentage. Check my edit again (CSS). Also check the link I provided, there is some more information. – Aaron May 09 '19 at 09:24
Awesome thanks, was trying it with that, but forgot about the !important... Been a while since doing some of this!! Thanks heaps for your help, I'll leave you alone now!! :) – Patrick May 09 '19 at 10:26
No worries mate. If you need any more help feel free to comment or ask another question :) – Aaron May 09 '19 at 10:30
Hey Aaron, sorry to bug you again, but you seem to know your stuff!! :) I'm struggling with importing the text from another page and displaying it in the modal. If I paste the text in the div it comes out fine, but when I use this code it goes all pear-shaped... document.getElementById('modal-body').innerHTML = '' It displays the text in a little box in the top right corner with a scroll bar, but I just want it to put the text directly in there and then the modal would look fine. – Patrick May 11 '19 at 12:20
1

Have finally worked it out... $.get(strURL, function(data) { html=data; document.getElementById('modal-body').innerHTML = html; }); Works a treat!! – Patrick May 11 '19 at 12:40
Good thing. Always a good feeling if you find a working solution! :) – Aaron May 11 '19 at 17:44

Getting an aria-haspopup showing

1 Answers1