Create randon popup windows

Discussion in 'HTML & Website Design' started by |Norman|, Oct 8, 2015.

  1. #1
    Probably with JS... I don't know, maybe with Bootstrap. Suggestions are welcome.
    This is what I want to do:

    [Click] <- Simple button

    When you click it, it open a popup window and the popup text content is randomly taken from a list of pre-definied texts. It is important for me that it is random.

    [1] This is a popup
    [2] Testing popups...
    [3] Heylà!
    [4] ....
    and so on.

    How can I do this? Some help please? :)
     
    Solved! View solution.
    |Norman|, Oct 8, 2015 IP
  2. #2
    I'd save those texts into test.xml like this:
    <?xml version="1.0" encoding="utf-8"?>
    <root>
        <text>This is a popup</text>
        <text>Testing popups...</text>
        <text>Reminder</text>
        <text>Heylà!</text>
        <text>....</text>
        <text>and so on.</text>
    </root>
    Code (markup):
    Then a page like below should load it:
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8">
            <title>test</title>
            <style>
                .mypopup{
                    display: none;
                    position: absolute;
                    top: 1em;
                    left: 1em;
                    padding: 1em;
                    background-color: lightgray;
                }
            </style>
        </head>
        <body>
            <h1>test</h1>
            <p>a paragraph</p>
            <input class="mybutton" value="my random text" type="button">
            <div class="mypopup">
                <p>loading text...</p>
                <input value="close me" type="button">
            </div>
            <script>
                (function(){
                    var mytexts, myajax = new XMLHttpRequest();
                    if (myajax){
                        myajax.onreadystatechange = function(){
                            if (myajax.readyState === 4){
                                if (myajax.status === 200){
                                    //ajax success: load texts into mytexts array,
                                    mytexts = myajax.responseXML.getElementsByTagName('text');
                                   
                                    //install click hander to button to show popup,
                                    document.querySelector('.mybutton').onclick = function(){
                                        var
                                            i = Math.floor(Math.random() * mytexts.length),
                                            mypopup = document.querySelector('.mypopup');
                                        mypopup.getElementsByTagName('p')[0].childNodes[0].nodeValue =
                                            mytexts[i].childNodes[0].nodeValue;
                                        mypopup.style.display = 'block';
                                    };
                                   
                                    //install click handler to popup close button.
                                    document.querySelector('.mypopup').querySelector('input').onclick = function(){
                                        this.parentNode.style.display = 'none';
                                    };
                                }
                                else
                                    alert('There was a problem this test.');
                            }
                        };
                        myajax.open('GET', 'test.xml');
                        myajax.send();
                    }
                })();
            </script>
        </body>
    </html>
    HTML:
    Note that these 2 files should be on server, else it won't work. Feel free to enhance them :)

    For further reading: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started#Step_3_–_A_Simple_Example
     
    hdewantara, Oct 8, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Why, in all that is holy, are you parsing XML to get a random text to show?
     
    PoPSiCLe, Oct 8, 2015 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    Since thread was popped up in a non server scripting sub,
    and the most natural way to parse that is in XML... perhaps?

    Ahh, @PoPSiCLe was right; OP didn't mention about reading it from a file.
    Well, I guess OP can replace ajax part with an array ;)
     
    Last edited: Oct 8, 2015
    hdewantara, Oct 8, 2015 IP
  5. |Norman|

    |Norman| Member

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    46
    #5
    Thank you so much, hdewantara, this is what I wanted! :)
     
    |Norman|, Oct 9, 2015 IP