Question

我正在尝试显示一个css模式框，如果用户在页面加载时收件箱中有邮件，则该框会弹出。到目前为止我已经开始使用链接<a href="#" id="mail_modal"></a>，但我不确定如何在页面加载时自动显示它。这是我的代码：

<?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>';
    }
?>

Answer 1

<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>

Answer 2

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

在页面加载时自动显示div

2 个答案: