模态 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">&times;</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>
  1. 你的头标签没有关闭

  2. 我尝试使用外部 css 和 js 文件。正在运行....

JSFIDDLE

<head>

</head> // This is closing tag
  1. 如果您想在页面加载时打开模式....

    $(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">&times;</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>