我正在使用引导程序在网站上工作。
基本上,我想在主页中使用一个模式,由英雄单元中的按钮召唤。
按钮代码:
<button type="button" class="btn btn-warning btn-large" data-toggle="modal" data-target="#myModal">Open Modal</button>
模式代码:
<div class="modal hide fade" id="myModal" 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">In Costruzione</h3> </div> <div class="modal-body"> <p>Test Modal: Bootstrap</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button> <button class="btn btn-warning">Salva</button> </div> </div>
问题是,只要我单击按钮,模式就会淡入,然后立即消失。
我会很感激任何帮助。
另外,如何更改下拉三角形的颜色(指向上方,不悬停)?我正在开发一个基于橙色和棕色的网站,蓝色的东西真的很烦人。
这是 Modal 插件的 JavaScript 被加载两次时的典型行为。请检查以确保插件没有被双重加载。根据您使用的平台,可以从多个来源加载模态代码。一些常见的有:
require('bootstrap')
一个好的起点是click使用浏览器中的开发人员工具检查已注册的事件侦听器。例如,Chrome 会列出可以找到注册监听器代码的 JS 源文件。另一种选择是尝试在页面上的资源中搜索模态代码中找到的短语,例如var Modal.
click
var Modal
不幸的是,这些并不总是在所有情况下都能找到东西。检查网络请求可以更可靠地为您提供页面上加载的所有内容的图片。
这是加载 bootstrap.js 和 bootstrap-modal.js 时发生的演示(只是为了确认您的经验):
如果您向下滚动到该页面上源代码的底部,您可以删除或注释掉 bootstrap- modal.js*<script>的行,然后验证现在模态将按预期运行。 *
<script>