1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Create randon popup windows

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

0
  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:
    536
    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