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

<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">
                <h4 class="modal-title" id="myModalLabel">
            <div class="modal-body">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                <button type="button" class="btn btn-primary">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->

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?


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

    var myModal = $("#myModal");