locked
How to convert modal pop Greeting RRS feed

  • Question

  • User-1790113996 posted

    Good day to all,

    kindly ask how to convert my code to modal pop up greeting message with design,
    please check my code below, thank you.

    <div class="w3-container">
    
    
    
        <div class="w3-container ">
    
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
           
    
    
            <div class="w3-col m12 ">
                <div class="wrapper ">
                    <h1 class="jumbotron w3-center w3-text-dark-grey">
                        <strong>Welcome!   to <span class="w3-text-cyan">w-R2R </span><span class="">!</span> </strong>
                        <span>-Make your request online.</span>
                    </h1>
                </div>
            </div>
            <div class="w3-col m12">
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </div>
    
    </div>
    <script type="text/javascript">
        var d = new Date()
        var time = d.getHours()
        if (time < 10) {
            alert("Good morning, Welcome to w-r2r");
        }
        else if (time > 10 && time < 16) {
            alert("Good afternoon, Welcome to w-r2r");
        }
        else {
           alert("Good evening, Welcome to w-r2r");
        }
    </script>
    
    
    

    with regards,

    CLoudfiers

    Friday, January 12, 2018 9:43 AM

Answers

  • User283571144 posted

    Hi Cloudfiers,

    kindly ask how to convert my code to modal pop up greeting message with design,
    please check my code below, thank you.

    According to your description, I suggest you could try to use jquery Dialog to show the model pop.

    More details about how to use it, you could refer to below codes:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                var d = new Date()
                var time = d.getHours()
                if (time < 10) {
                    $("#greeting").text("Good morning");
                }
                else if (time > 10 && time < 16) {
                    $("#greeting").text("Good afternoon");
                }
                else {
                    $("#greeting").text("Good evening");
                }
        $( "#dialog" ).dialog();
      } );
        </script>
    </head>
    <body>
        <div id="dialog" title="Basic dialog">
        <div id="greeting">
        </div>
            <h1 class="jumbotron w3-center w3-text-dark-grey">
                 <strong>Welcome!   to <span class="w3-text-cyan">w-R2R </span><span class="">!</span> </strong>
             </h1>    </div>
    
    
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 15, 2018 6:52 AM