如何将模态设置为自动打开?

时间:2013-09-05 20:28:32

标签: php javascript jquery twitter-bootstrap

我正在使用bootstrap - 如何让它自动打开?如果if语句为真,我可以自动加载而不是使用href =“#Register”启动吗?感谢。

<?php 
      require 'header.php';
      require 'center.php'; 
      require 'footer.php';

        if(!isset($_SESSION['pay_address'])) {

            ?>
             <li><a data-toggle="modal" href="#Register">Register</a></li>
            <!--- Register Modal -->
<div class="modal fade" id="Register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Deposit Funds</h4>
        </div>
        <div class="modal-body">
         <p>Your unique deposit address for GigaDice is: <strong>1HXtoMuv6xU1rLGfn6C9z9H6REHEtAs1gW</strong></p>
          <p> If you have cookies disabled or clear them regularly, be sure to save your account ID and password.
              </p>
              <p>Alternatively, pay with Coinbase.  Coinbase allows for instant deposits!</p>
        <a class="coinbase-button" data-code="08409eb5d732affc131087bd72c48724" data-button-style="custom_small" href="https://coinbase.com/checkouts/08409eb5d732affc131087bd72c48724">Pay With Bitcoin</a><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
        <p>Alternatively, pay with Inputs.io.  Inputs.io allows for instant deposits!</p>
        <script src='https://inputs.io/js/buttons.js'></script>
<a href='https://inputs.io/pay?to=Loker' class='inputsio' data-success='You may need to refresh the page.' data-to='Loker' >Fund Account</a>
                <br /><br /><p>If your deposit does not go through, e-mail deposits@gigadice.com.</p>
                            <p>Remember to click your balance to see if it has updated!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
<!--- End Register Modal -->
            <?php

        }
?>

2 个答案:

答案 0 :(得分:0)

在模态代码之后,您可以添加:

<script type="text/javascript">
    $(function(){
        //instantiate your content as modal
        $('#Register').modal({
            //modal options here, like keyboard: false for e.g.
        });

        //show the modal when dom is ready
        $('#Register').modal('show');
    });
</script>

一旦DOM准备好,就会打开模态。放入php if,这样它只显示模态html显示的时间。

更多信息:http://getbootstrap.com/javascript/#modals

答案 1 :(得分:0)

如果您将data-show=true添加到标记中,则应将其直接启动。