Bootstrap模态窗口没有显示

时间:2016-01-20 01:52:44

标签: javascript jquery html twitter-bootstrap

我今天尝试使用Bootstrap上的模态窗口,但我遇到了问题。莫代尔不会表现出来。我完全如getbootstrap.com/javascript/#modals所示,但它仍然无法正常工作。有人知道这个问题吗?这是我的代码。

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="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">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></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>
  </div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

好的,所以你需要做的就是将jquery添加到你的javascript库中,你可以看到下面的工作代码只是复制并粘贴整个东西。在文档的头部有一个脚本标记,其中包含指向bootstraps js文件的链接,上面是一个指向jquerys js文件的链接。 Bootstrap运行jquery所以没有它就无法运行。使用bootstrap,你总是需要在bootstraps js file

之前加载jquerys js文件
<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="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">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></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>
  </div>
</div>
</body>
</html>

答案 1 :(得分:0)

我认为,你有两个问题:

  • 首先,正如@Cory所说,我认为您将自定义的javascript放在页面底部

  • 第二个,你没有包含jquery(并且不要忘记在引导程序之前插入它)

我在这里做了一个小提琴,我将class App1 { private divStream: HTMLElement; private divResult: HTMLElement; constructor(divStream: HTMLElement, divResult: HTMLElement) { this.divStream = divStream; this.divResult = divResult; } start() { var filterByCharacter = (expectedCharater) => { return (char) => { return char === expectedCharater; }; }; var values = ['a', 'b', 'b', 'c', 'b']; var obChars = Rx.Observable.fromArray(values); obChars.subscribe((k) => { divStream.innerHTML += "<div style='color: blue'>" + ":: " + k + " ::" + "</div>"; }, (err) => { divStream.innerHTML += "<div style='background-color: blue' > " + 'Error: ' + err + " </div>"; }, () => { divStream.innerHTML += "<div style='background-color: blue'>" + ":: finished ::" + "</div>"; } ); function log(text: string) { divResult.innerHTML += "<div style='color: green'>" + text + "</div>"; } var obA: Rx.Observable<string> = obChars.filter(filterByCharacter('a')); var obB: Rx.Observable<string> = obChars.filter(filterByCharacter('b')); var obC: Rx.Observable<string> = obChars.filter(filterByCharacter('c')); let aSteps: Rx.Observable<any>[] = []; aSteps.push(obA.take(1).do(() => { log("a"); }).ignoreElements()); aSteps.push(obB.take(1).do(() => { log("b"); }).ignoreElements()); aSteps.push(obC.take(1).do(() => { log("c"); })); let steps: Rx.Observable<any> = Rx.Observable.concat<any>(aSteps); var source = steps .takeUntil(Rx.Observable.timer(100 * values.length)); var subscription = source.subscribe( function (x) { log("Next: " + x); }, function (err) { divResult.innerHTML += "<div style='background-color: green'>Error: " + err + "</div>"; }, function () { divResult.innerHTML += "<div style='background-color: green' > " + 'Completed' + "</div>"; }); } stop() { clearTimeout(this.timerToken); } } window.onload = () => { var app = new App1(document.getElementById('divStream'), document.getElementById('divResult')); app.start(); }; 添加到你的模态中,它看起来效果很好:https://jsfiddle.net/9hxo6x88/

希望有所帮助