javascript - Bootstrap 3 modal not working? - Stack Overflow

I feel like I am missing something incredibly dumb here, so spare me.But I can't seem to get this

I feel like I am missing something incredibly dumb here, so spare me.

But I can't seem to get this bootstrap modal to work. Here's my code:

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="bootstrap.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src=".5/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- 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">&times;</button>
        <h4 class="modal-title" id="myModalLabel">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 -->
</div><!-- /.modal -->
</body>

Here it is live: .html

Any help and/or direction would be greatly appreciated. Thanks!

I feel like I am missing something incredibly dumb here, so spare me.

But I can't seem to get this bootstrap modal to work. Here's my code:

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="bootstrap.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- 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">&times;</button>
        <h4 class="modal-title" id="myModalLabel">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 -->
</div><!-- /.modal -->
</body>

Here it is live: http://gadole./guideu/modal.html

Any help and/or direction would be greatly appreciated. Thanks!

Share Improve this question asked Jan 8, 2014 at 23:22 user1811315user1811315 271 gold badge1 silver badge6 bronze badges 1
  • 1 I'm getting with both browsers (chrome & firefox) an error: TypeError: a(...).on is not a function http://gadole./guideu/js/bootstrap.min.js Line 7 (firefox) – Eich Commented Jan 8, 2014 at 23:31
Add a ment  | 

2 Answers 2

Reset to default 3

Bootstrap's modal function requires jQuery's on() method, which was introduced with jQuery version 1.7.Therefore, you need jQuery 1.7 or higher.

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7/jquery.min.js"></script>

See http://jsfiddle/jhfrench/ZWv52/2/ for a working example.

I hope it's what you want

html

 <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
    <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>

css

    .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744778428a4593184.html

相关推荐

  • javascript - Bootstrap 3 modal not working? - Stack Overflow

    I feel like I am missing something incredibly dumb here, so spare me.But I can't seem to get this

    13小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信