我今天尝试使用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">×</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>
答案 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">×</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/
希望有所帮助