模态 bootstrap 未显示
Modal bootstrap is not showing
我对网络应用程序开发还很陌生。我有一个基于 OpenLayers 6.5 的网络地图应用程序。我想添加 Bootstrap 模式,只要加载 web 地图就会自动显示。我尝试遵循 Bootstrap 文档,但我的模态框未显示。我使用 Bootstrap v.3.4。这是我的代码片段:
<!doctype html>
<meta charset="utf-8"/>
<html lang="en">
<head>
<!-- Ol CSS -->
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-layerswitcher-master/dist/ol-layerswitcher.css" />
<!-- Ol JS -->
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
<script src="libs/jquery.min.js"></script>
<!-- Ol-ext extension -->
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
<!-- J-Query -->
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<script src="libs/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="http://158.194.94.29:8081/webgis/libs/jquery-ui-1.12.1/jquery-ui.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="libs/bootstrap.min.css">
<script type="text/javascript" src="libs/bootstrap.min.js"></script>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
等等
知道为什么模态没有显示吗?
是否要在页面加载时显示模式?
在上述情况下,您还没有调用模态,因此它是隐藏的。模态本身将保持隐藏状态,直到或除非使用事件调用它。如果您希望在页面加载时显示模式,请使用以下代码。
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
你的头标签没有关闭
我尝试使用外部 css 和 js 文件。正在运行....
<head>
</head> // This is closing tag
如果您想在页面加载时打开模式....
$(window).on('load', function() {
$('#myModal').modal('show');
});
这是代码。 运行 片段。模式弹出窗口正在加载时打开。
$(window).on('load', function() {
$('#myModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
</body>
</html>
我对网络应用程序开发还很陌生。我有一个基于 OpenLayers 6.5 的网络地图应用程序。我想添加 Bootstrap 模式,只要加载 web 地图就会自动显示。我尝试遵循 Bootstrap 文档,但我的模态框未显示。我使用 Bootstrap v.3.4。这是我的代码片段:
<!doctype html>
<meta charset="utf-8"/>
<html lang="en">
<head>
<!-- Ol CSS -->
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-layerswitcher-master/dist/ol-layerswitcher.css" />
<!-- Ol JS -->
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
<script src="libs/jquery.min.js"></script>
<!-- Ol-ext extension -->
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
<!-- J-Query -->
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<script src="libs/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="http://158.194.94.29:8081/webgis/libs/jquery-ui-1.12.1/jquery-ui.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="libs/bootstrap.min.css">
<script type="text/javascript" src="libs/bootstrap.min.js"></script>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
等等
知道为什么模态没有显示吗?
是否要在页面加载时显示模式?
在上述情况下,您还没有调用模态,因此它是隐藏的。模态本身将保持隐藏状态,直到或除非使用事件调用它。如果您希望在页面加载时显示模式,请使用以下代码。
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
你的头标签没有关闭
我尝试使用外部 css 和 js 文件。正在运行....
<head>
</head> // This is closing tag
如果您想在页面加载时打开模式....
$(window).on('load', function() { $('#myModal').modal('show'); });
这是代码。 运行 片段。模式弹出窗口正在加载时打开。
$(window).on('load', function() {
$('#myModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
</body>
</html>