A small modal CSS-only does not show up on mobile

Hi guys,

I've a problem with small modal display. The site is https://lynkline.com

When I cliked on the anchor tag, says "<a href="#!">Global Tags</a>", a small modal would have shown up so the user can click on the tag's link and go to the associated page.

This isn't a problem on PC and notebook but it doesn't work on the iPhone.

How can I fix it?

Thanks,

The HTML:

<div class="link-tags-list">
    <i><img src="/html/img/global.svg"></i>
    <small><a href="#!">Global Tags</a></small>
    <div class="link-tags-list-detail">
        <div class="tags-list-detail-inner">
            <ul>
                ${tags} // li list inserted by javascript
            </ul>
        </div>
    </div>
</div>

Code (markup):

The CSS:

.link-tags-list-detail {
    left: 0;
    bottom: 2em;
    z-index: 1;
    display: none;
    position: absolute;
    width: fit-content;
    block-size: fit-content;
    box-shadow: 0em 0.07em 0.2em 0em rgba(0,0,0,0.2);
    border-radius: 0.2em;
}
.link-tags-list-detail:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 1.25em solid transparent;
    border-top-color: rgba(218,224,229, 1.0);
    border-bottom: 0;
    border-left: 0;
    margin-left: -0.625em;
    margin-bottom: -1.25em;
}
.link-tags-list-detail {display: block;}

Code (markup):

 

Thanks @sarahk for reporting the bug.

By my research, it has to do with MongoDB database using aggregate method to retrieve n samples. I've never encountered this in the development environment. I'll see if I can find alternative.

 

Hi! The issue might be related to how iOS handles "click" events for <a href="#!"> elements. Try replacing href="#!" with href="javascript:void(0);" and ensure that the script for triggering the modal works correctly on mobile devices.

 

Thanks @VladislovasBartulis, for suggestion. I'll try it.

 

@sarahk,

I've fixed the issue.

I can't believe accessing my MongoDB database via MongoDB Compass could cause my database disappeared. Luckily it's just a few days old. I can start it over.

 

Thanks @sarahk, for checking in.

Maybe I add JavaScript to ensure of it.