模态不显示引导程序
[英]Modal doesn't show bootstrap
问题描述
我创建了一个带有模态的页面，但没有一个不显示，我认为 JavaScript 是错误的，但是当我检查代码时，似乎一切正常，show_modal 出现了，但没有加载模态。 请帮我。
<a href="#" class="extra modal-5 o-table__cell-data"> Pranešimų nustatymai </a>
<div class="modal modal-5">
<div class="overlay" id='five'></div>
<div class="modal__content mod_transition">
<div class="close_modal" id='five'>
<div class='entypo-cancel-circled' id='icon'></div></div>
<h1>Modal One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<ul>
<li class="entypo-facebook-circled "></li>
<li class="entypo-gplus-circled"></li>
<li class="entypo-pinterest-circled"></li>
<li class="entypo-twitter-circled"></li>
</ul>
<div class="byline">
<address class="author">By: <div id="author" href="/author/john-doe">John Doe</a></address>
on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>
</div>
</div>
</div>
</div>
JAVASCRIPT
$('.extra').click(function() {
var m = $(this)[0],
classes = m.className.split(/\s+/);
for(var i = 0; i < classes.length; i++) {
if(classes[i].match(/modal-/)) {
var modalClass = classes[i];
$('.modal.' + modalClass).toggleClass('show_modal');
}
}
});
$('.close_modal').click(function() {
$(this).closest('.modal').toggleClass('show_modal');
});
$( '.overlay' ).on( 'click', function() {
$(this).closest('.modal').toggleClass('show_modal');
});
3 个解决方案
解决方案1
1 已采纳 2020-08-14 09:04:35
您似乎没有在页面上添加 class modal_diaplay 。 将此 CSS 添加到页面头部的样式标记中。
<style>
.show_modal{display:block}
</style>
当您单击链接时，这将显示模式，但您的代码似乎不适合模式。
使用此模态：
<div class="modal modal-5" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
解决方案2
0 2020-08-14 08:05:25
我最大的猜测是你试图打开一个引导模式但最终撞到了墙上。
这是 go 关于此的最简单方法，请参见下面的代码片段。
我建议您点击此链接以更详细地说明引导模式的工作原理： Bootstrap 的 JavaScript 模式插件
我还建议您将其带入基础知识，以正确理解模态框的工作原理，这是一个链接，用于在不使用任何插件的情况下创建简单的 html、css 和 js 模态框：如何创建模态框
祝你好运，编码愉快:)...
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min;js"></script> </head> <body> <div class="container"> <br> <.-- Button trigger modal --> <button type="button" class="extra btn btn-primary" > Pranešimų nustatymai </button> <.-- Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×.</span> </button> </div> <div class="modal-body">... </div> <div class="modal-footer"> <button type="button" class="close-modal btn btn-secondary">Close</button> </div> </div> </div> </div> </div> <script> $(document).ready(function () { $(';extra');click(function() { $("#myModal").modal(). }). $(';close-modal');click(function() { $("#myModal");modal('hide'); }); }); </script> </body> </html>
解决方案3
0 2020-08-14 08:15:27
如果您对项目没有限制并使用 Boostrap，请查看文档（ https://getbootstrap.com/docs/4.0/components/modal/ ），您不需要任何 JavaScript 行来显示和关闭模态 window：
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min;js"></script> </head> <body> <div class="container"> <,-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Launch demo modal </button> <,-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×.</span> </button> </div> <div class="modal-body"> Lorem ipsum dolor sit amet. consectetuer adipiscing elit. sed diam nonummy ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> </div> </body> </html>
Modal Bootstrap 4 不显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.