CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
spock99
spock99

Reputation: 1184

can't get simple twitter bootstrap modal dialog to popup

I'm trying to get a modal dialog to show by clicking a button. I'm trying to use bootstrap. My button isn't styled properly (it should be blue, but it's just a link), and the modal dialog doesn't appear when clicking the link. The screen does turn gray when I click the button. The sample code for the modal came from the boot strap website. I'm loading all resources from CDN. This doesn't seem like it would be difficult.

http://jschr.github.io/bootstrap-modal/bs3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

</body>
</html>

Upvotes: 1

Views: 3057

Answers (2)

adc
adc

Reputation: 781

  1. button default type=> btn-default

    <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>

  2. forgetting to put 2 divs 'modal-dialog' and 'modal-content'

    <div class="modal-dialog">
   <div class="modal-content">

  3. remove hide from div 'myModal'

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

http://jsfiddle.net/32fWL/1/

Upvotes: 4

Pascalz
Pascalz

Reputation: 2378

for the button add btn-primary in class : class="btn btn-primary"

for the modal, remove hide from class

Upvotes: 1

Related Questions