引导模式根本不起作用 [英] bootstrap modal not working at all

问题描述

我知道这个问题之前已经被问过数百次了，我已经问过了，但这些都无法解决我的问题:s

这是我目前的代码

 <link rel="stylesheet" type="text/css" href="style.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"><script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen"><link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen"><link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen">

在身体内部我有这个:

<a href="#myModal" role="button" class="btn" data-toggle="modal">启动演示模式</a><div id="myModal" class="modal hidefade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">模态标头</h3>

<div class="modal-body"><p>一个精致的身体……</p>

<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button>

请注意，我在 head 部分使用了一些其他库，因为我可能需要它们用于 Google Map，我尝试删除它们但仍然没有触发 Modal 视图.

解决方案

检查 bootstrap 的版本.请注意，在引导程序 5 中，将 data-toggle 更改为 data-bs-toggle 并将 data-target 更改为 data-bs-target

I know this question has been asked hundred of times before and I've been through them but those couldn't fix my case :s

This is my code so far

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
    <link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen">
    <link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen">
    <link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen">

and inside body I have this:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Note that I use some other libraries on the head section because I need them for Google Map maybe, I tried to remove those but still didn't trigger the Modal view.

解决方案

Check the version of bootstrap. Take attention that in bootstrap 5 changed data-toggle to data-bs-toggle and data-target to data-bs-target

这篇关于引导模式根本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！