Custom HTML Popup inside of Cell

Home Forums Data Table Plugin Custom HTML Popup inside of Cell

This topic contains 1 reply, has 2 voices, and was last updated by neveryoung2212 neveryoung2212 1 year ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #16800

    rguarnieri
    Participant

    Hello,

    I am trying to execute a custom javascript/div code within a column of cells. It is for a small info button that when clicked, displays a “popup” with a description of the item listed in the row. Below is the CSS, HTML and SCRIPT that I am using. Unfortunately, the popup will only display “within” the cell in which the HTML is located. And, because that cell is small, it is not visible at all. Is it possible to overlay the DIV so that it appears highest on the z-index, and therefore in front of all the other cells when it is clicked?

    `
    .popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    }

    .popup .popuptext::after {
    content: “”;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
    }

    .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    }

    @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
    }

    @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
    }
    </style>
    </head>
    <body style=”text-align:center”>

    <div class=”popup” onclick=”myFunction()”>ⓘ
    <span class=”popuptext” id=”myPopup”>This module will provide users with a high-level overview of patents, copyrights, trademarks, trade secrets, and confidentiality. It is generally intended as an introduction to more detailed programs for each.</span>
    </div>

    <script>
    // When the user clicks on div, open the popup
    function myFunction() {
    var popup = document.getElementById(“myPopup”);
    popup.classList.toggle(“show”);
    }
    </script>

    #17586
    neveryoung2212
    neveryoung2212
    Moderator

    Hello, @rguarnieri !
    Sorry for a late reply on forum. Fortunately, your problem has been already resolved. Don’t hesitate to contact us again – we’re always glad to hear from you.
    Have a nice day!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Get plugins bundle today and save over 80%