CODEWITHSUNDEEP
phpjavascriptcss
zzwyb89
zzwyb89

Reputation: 470

Displaying a div automatically on page load

I am trying to display a css modal box, which should pop up for a user if he has mail in his inbox, on page load. I got it working so far for a link <a href="#" id="mail_modal"></a>, but I'm not sure how to make it appear automatically upon page load. This is my code:

<?php
if ($items > 0)
    {
        echo '<strong><font color="yellow">You have new unread mail</font></strong>';
    ?>

    <script type="text/javascript">
    $(document).ready(function() {
    $('#button_modal').click(function(e) { 
            $('#modal').reveal({ 
                animation: 'fadeAndPop', 
                animationspeed: 400,   
                closeonbackgroundclick: true, 
                dismissmodalclass: 'close'
            });
        return false;
        });
    });
    </script>

    <div id="modal">

        <div id="mail-form">

            <h1>New Mail</h1>

            <fieldset>

                <form name="loginform" action="<?php echo url('/Mail');?>">

                    <p>You have new unread mail in your inbox. Press 'Mail' button to access your inbox.</p>

                    <input type="hidden" name="redir" value="<?php echo url('/Mail'); ?>" />
                    <input type="hidden" name="action" value="mail" />
                    <input type="submit" name="submit" value="Mail" />

                </form>

            </fieldset>

        </div> <!-- end login-form -->

    </div>

    <?php
    }
    else
    {
        echo '<i>You have no new mail</i>';
    }
?>

Upvotes: 0

Views: 346

Answers (2)

Arsen Kazydub
Arsen Kazydub

Reputation: 5660

<script type="text/javascript">
$(document).ready(function() {
  $('#button_modal').click(function(e) { 
    $('#modal').reveal({ 
      animation: 'fadeAndPop', 
      animationspeed: 400,   
      closeonbackgroundclick: true, 
      dismissmodalclass: 'close'
    });
    return false;
  });

  // and here we show popup automatically, if a user has new letters.
  <?php if ($items > 0) echo "$('#button_modal').trigger('click');"; ?>

});
</script>

Upvotes: 1

James Coyle
James Coyle

Reputation: 10418

$(document).ready(function() {
    if(/* check if has mail */ === true) {
        $('#modal').reveal({ 
            animation: 'fadeAndPop', 
            animationspeed: 400,   
            closeonbackgroundclick: true, 
            dismissmodalclass: 'close'
        });
    }
});

Upvotes: 0

Related Questions