How to bootstrap modal popup via a variable?

I am studying the bootstrap, and follow the example:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Shows the modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <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" id="myModalLabel">
                    模态框(Modal)标题
                </h4>
            </div>
            <div class="modal-body">
                在这里添加一些文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

if I click the button the modal will popup, but I don’t understand which variable is controlling the modal popup and disappear.

I want to through a variable to popup it. there is a requirement.

when I enter a Smarty page, if the page do not exists a access_token variable, I want the modal popup automatically.

So, how to realize in this example?

Answer

  1. With JavaScript (jQuery), select the modal element and store it in variable.
  2. Trigger the show method.

    var myModal = $("#myModal");
    
    myModal.modal("show");