问题描述
我创建了一个包含模态的页面,但没有一个显示出来,我认为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,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');
});
解决方法
似乎您没有在页面上添加 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>
,
我最大的猜测是您试图打开一个引导程序模版,但最终撞墙。
这是解决此问题的最简单方法,请参见下面的代码段。
我建议您点击此链接以详细了解引导模式的工作方式:Bootstrap’s JavaScript modal plugin
我还建议您将其作为基础知识,以正确理解模态框的工作原理,这里是一个无需使用任何插件即可创建简单的html,css和js模态框的链接:How To Create a Modal Box
祝你好运,编码愉快:) ...
<!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>
,
如果您对项目没有限制并使用Boostrap,请查看文档(https://getbootstrap.com/docs/4.0/components/modal/),您不需要任何JavaScript行即可显示和关闭模式窗口:
<!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>