Question

58

Show progress bar in modal dialog using Twitter Bootstrap

rated 0 times [ 63] [ 5] / answers: 1 / hits: 40233 / 9 Years ago, tue, april 14, 2015, 12:00:00

How do you show a progress bar inside a modal window using twitter bootstrap?
The screen greys out but the modal dialog is not showing.

JSFiddle

http://jsfiddle.net/jkittell/L0ccmgf2/4/

HTML

<body>

     <h1>Hello World!</h1>



    <div class=modal hide id=pleaseWaitDialog data-backdrop=static data-keyboard=false>

        <div class=modal-header>

             <h1>Processing...</h1>



        </div>

        <div class=modal-body>

            <div class=progress progress-striped active>

                <div class=bar style=width: 100%;></div>

            </div>

        </div>

    </div>

</body>

JavaScript

$(function () {

    var pleaseWait = $('#pleaseWaitDialog');



    showPleaseWait = function () {

        pleaseWait.modal('show');

    };



    hidePleaseWait = function () {

        pleaseWait.modal('hide');

    };



    showPleaseWait();

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maurodannyr

Add To Favorites

Follow

Total Points: 126

Total Questions: 103

Total Answers: 105

Location: Maldives

Member since Sun, Feb 27, 2022

2 Years ago

answered 9 Years ago lara · Accepted Answer

Use this markup instead:

<!-- Modal -->

<div class=modal fade id=pleaseWaitDialog tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>

  <div class=modal-dialog>

    <div class=modal-content>

      <div class=modal-header>

          <h1>Processing...</h1>

      </div>

      <div class=modal-body>

        <div class=progress>

          <div class=progress-bar progress-bar-success progress-bar-striped role=progressbar aria-valuenow=40 aria-valuemin=0 aria-valuemax=100 style=width: 40%>

            <span class=sr-only>40% Complete (success)</span>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

See this updated fiddle