Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 modal form not appearing

I have this simple modal form done with Bootstap 3, and I have no clue why it's not appearing when I click on the button.

<div id="modal" class="modal hide fade in" style="display: none;">
    <div class="modal-header">  
        <a class="close" data-dismiss="modal">×</a>  
        <h3>Some title</h3>  
    </div>  
    <div class="modal-body">  
        <form id="modal-form" accept-charset="UTF-8" action="/mailing" data-remote="true" method="post">
            <label>Name:</label>
            <input type="text" class="span6">  

            <label>Email:</label>
            <input type="text" class="span6">  

            <label>Message:</label>
            <textarea type="text" class="span12" rows="4"></textarea>
        </form>
    </div> 
    <div class="modal-footer">
        <a href="#" class="btn btn-success">Send</a>  
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>  
    </div>  
</div>

And this is the button that should make this modal window appear when clicked:

<p class="text-center">
    <a data-toggle="modal" href="#modal" class="btn btn-success btn-lg">
        <span class="glyphicon glyphicon-envelope"></span>
                    Message me
    </a>
</p>

It is not much different to the example codes I've seen around the web, but I can't make the modal window to appear.

Any idea why it's not working?

Edit:

This is how I'm including the Bootstrap JS files:

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
like image 367
Xar Avatar asked Dec 19 '22 22:12

Xar


1 Answers

Try removing the class hide from the modal div:
<div id="modal" class="modal fade in" style="display: none;">

like image 169
myusuf Avatar answered Jan 02 '23 18:01

myusuf