CODEWITHSUNDEEP
htmltwitter-bootstrap
user3379926
user3379926

Reputation: 3935

Bootstrap Modals

So I have the following html:

<div class="btn-group pull-right">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Export Features <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" role="menu">
        <li><a href="#" data-toggle="modal" data-target="#myModal">CSV</a>
        </li>
        <li><a href="#">Excel</a>
        </li>
    </ul>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <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 title</h4>
            </div>
            <div class="modal-body">
                <h3>Currently downloading: <small>feature-set-II.csv</small></h3>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
                        60%
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" disbaled>Begin Download</button>
            </div>
        </div>
    </div>
</div>

And when ever I click on CSV in the button drop down - what happens is it refreshes the page and the modal never opens, I believe its because of the href="#" part, but I am not sure, This shouldn't require any JS at all...

Upvotes: 0

Views: 216

Answers (3)

Felix
Felix

Reputation: 38102

Your code should works fine:

Bootply Demo

Some things to note:

  • You need to include jQuery since Bootstrap js require jQuery to works.

  • You need to include Bootstrap CSS and JS files.

  • Include Bootstrap JS after you've included jQuery properly.

Upvotes: 1

LOTUSMS
LOTUSMS

Reputation: 10240

Your call to the modal should match IDs. Use something like this:

<a data-toggle="modal" href="#myModal">CSV</a>

Your first div for you modal should be something like this

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

That should fix it

Upvotes: 0

Gabriel S.
Gabriel S.

Reputation: 1943

Your example does work correctly. Try it in this Bootply.

The Modal feature from Bootstrap requires the bootstrap.js library or at least the modal.js part of this library. You don't need to write any Javascript but you do need to include the Javascript library.

Upvotes: 1

Related Questions