1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Need a bit of help with js onclick popup

Discussion in 'Styling and Customization Questions' started by RichardKYA, Jan 27, 2016.

  1. RichardKYA

    RichardKYA Well-Known Member


    I'll start off by saying I am rubbish with js.

    I am trying create an onclick popup div and after falling into a Google hole and being lost for about 12hrs, I think I have finally got things kinda working, BUT, the issue I am having is that the content of the popup relies on a variable that goes through a xen:foreach.

    At the moment, I am trying to get the content from a div that has "display:none" via getElementById, but of course, the id is also subject to a variable that goes through the xen:foreach, example: id="item_{$user.user_id}".

    So, a couple of questions:

    1 - Is this the best way to do this?
    2 - How can I pass xf variables in my js?
    3 - Would it be possible to create the div and fetch the content at the same time instead of fetching it all first and hiding it with display:none? - Eg, instead of getElementById, just have content='{$example.content}' or something?

    Here is an example of the code I have, I've changed the id and the getElementById to help explain what it is that I am trying to do, but like I say, I haven't a clue, so if this is not the way to go, I am very much open to suggestions

    <span onClick="myPopup();" class="more-button">More</span> // Once this is clicked
                                <div id="item_{$user.user_id}" style="display:none"> // This Pops up
                                    <a href="link to page" class="view-page-link">View Page</a>
    ...my js...

     function myPop(){
    // Creates a full width/height div as a "click-away" area to close popup
        var close = document.createElement('div');
            close.className = 'close-popup';
            close.onclick = function (e) { close.parentNode.removeChild(close) };
    // Creates popup div to contain content
        var varInfo = document.createElement('div');
            varInfo.className = 'info';
    // Creates span inside popup to contain text fetched by id from display:none div
        var infoText = document.createElement('span');
               infoText.innerHTML = document.getElementById('item_{$user.user_id}').innerHTML;
    Thank you for any help, I appreciate it :)

Share This Page