Reputation: 97
I'm fairly new to Bootstrap and web design in general. I just don't understand why certain things in Bootstrap don't work! I'm currently trying to use a modal.
Trigger:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
Modal:
<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">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
I've tried making my own Modal and it won't work, so I've even just pulled this code off of a Stack Overflow article and it doesn't seem to work for me.
Why won't it work?
Scripts:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/init.js"></script>
Upvotes: 0
Views: 1667
Reputation: 836
This solution will definitely work but this is not a good idea, As i understand you you want to show modal on anchor click.just do one thing. On anchor click use this..
$(function(){
$('.btn-lg').click(function(){
$('#myModal').toggleClass('in');
});
});
Please let me know if it helps you i will create a snippet if you want.
Upvotes: 1
Reputation: 670
Assuming you're using Bootstrap 3, as this code suggests, the code is correct. Have you included the bootstrap.js or bootstrap.min.js asset in the header of your page? The modal requires either of these js files.
Upvotes: 1