Modal Easter Egg

modalEasterEgg is an easy-to-use modal Easter Egg for web pages. modalEasterEgg uses both mouse and keyboard events and load the settings from a json file (modalEasterEgg.json). Options which can be changed are: id of a HTML element (one of your webpage elements), a character, your message and its CSS style. When the user goes over the element with the mouse and presses the predefined character from keyboard, the hidden message will be showed in a JavaScript modal.

1. With Bootstrap and JQuery
2. With JavaScript

Demo:

Usage:

All you need to do is:

1. All the settings is saved in a json file. You want to change the settings? No problem; Change them in the modalEasterEgg.json. Don't forget to put the modalEasterEgg.json in the proper address (default is the same folder of your webpages):
• theElement → The ID of the HTML element for the mouse event.
• theMessage → The text of your message (You can add HTML tags too).
• theCharacter → The character for the keyboard event.
• messageStyle → The CSS style for your message.
• modalBlock → This is the modal block. Don't change it. Each version of modalEasterEgg (with pure JavaScript/with Bootsrtap and JQuery) uses different modalBlock.

                    
    /*    This is  how  the  modalEasterEgg.json     
    *    looks  like  (for the  pure JavaScript     
    *    version). All the settings go here and     
    *    can be changed easily.     
    */    
    {   
        "theElement": "my-element",
        "theCharacter": "i",
        "theMessage": "This was supposed to be my secret message.<br><br>How did you find it? :D",
        "messageStyle": "style='background-color:#F2DEDE;color:brown; font-size:1.3em; text-align:center;padding:25px;'",
        "modalBlock": "<div style='display:block;' id='myModal' class='modal'><div class='modal-content'  ><span class='close' onclick='this.parentElement.parentElement.style.display = \"none\";'>×</span><p>the message</p></div></div>"    
    }
                    
                

2. Add modalEasterEgg.min.js to your codes:

                       <script type="text/javascript" src="/your path here/modalEasterEgg.min.js"></script>
                   

3. If you want to use the version with Bootstrap and JQuery, Add bootstrap.min.css, bootstrap.min.js and jquery.min.js to your webpages:

                       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                   

4. If you want to use the version with JavaScript, Add modalEasterEgg.min.css to your webpages.

                       <link rel="stylesheet" src="/your path here/modalEasterEgg.min.css">
                   

5. Add <div id="the-div"></div> to the body of your webpages. Don't change the id.

Credits:

License: