【发布时间】：2017-01-13 02:11:25
【问题描述】：
我关注/复制了所有可用的内容here。但是当我点击链接按钮时，灰色背景（覆盖）显示，但模式本身丢失了。
在不同浏览器中的行为：
Chrome 53.0叠加显示，模态未显示
Mozilla 18.0、IE 11.0、Opera 42.0叠加显示，模态显示不到一秒然后消失
检查开发者工具/开发者菜单/开发者工具栏表明模态应该是可见的。 以下是供参考的标签：
按钮链接 移除了示例中的类以保持链接设计
<a href="#modal1">Modal</a>
页面加载模式
<div id="modal1" class="modal">
<!-- contents same with the sample located at http://materializecss.com/modals.html#structure -->
</div>
点击按钮链接上的模态 悬停时，屏幕上的突出显示也不可见
<div id="modal1" class="modal open" style="z-index: 1003; display: block; opacity: 1; transform: scaleX(1); top: 10%;">
关闭模式
<div id="modal1" class="modal" style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 100px;">
点击按钮链接上的叠加层
<div class="modal-overlay" id="materialize-modal-overlay-1" style="z-index: 1002; display: block; opacity: 0.5;"></div>
初始化脚本 位于正文元素的末尾
<script>
$(document).ready(function () {
$('.modal').modal();
});
</script>
我将如何解决这个问题？有什么方法可以知道问题出在哪里？
这是 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><!-- title --></title>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="javascript_path/jquery-3.1.1.js"></script>
<script type="text/javascript" src="javascript_path/jquery-ui-1.8.24.js"></script>
<link href="css_path/materialize.css" rel="stylesheet" />
<link href="css_path/material.css" rel="stylesheet" />
</head>
<body>
<nav class="grey darken-3 white-text" role="navigation">
<div class="nav-wrapper">
<a href="#" class="brand-logo" />
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="menu"></i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li>
<a href="#" data-activates="dropdown_more_main_menu" class="dropdown-button" id="dropdown-more-main-menu"><i class="more_vert"></i></a>
<ul id='dropdown_more_main_menu' class='dropdown-content'>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li>
<!-- HERES THE MODAL NOT WORKING -->
<!-- HERES THE MODAL NOT WORKING -->
<a href="#modal1">Logout</a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Logging out</h4>
<p>Are you sure you wish to logout?</p>
</div>
<div class="modal-footer">
<a href="#" class=" modal-action modal-close waves-effect waves-green btn-flat">Continue</a>
<a href="#" class=" modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
</div>
</div>
<!-- HERES THE MODAL NOT WORKING -->
<!-- HERES THE MODAL NOT WORKING -->
</li>
</ul>
</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</nav>
<div class="container">
<!-- some contents -->
</div>
<script type="text/javascript" src="javascript_path/materialize.js"></script>
<script>
$(document).ready(function () {
$('.modal').modal();
// some codes
});
</script>
</body>
</html>
【问题讨论】：
-
你把
jQuery加到js lib了吗？ -
是的。
JQuery 3.1.1 -
能否提供完整的 HTML 代码？我已经使用 codepen 进行了测试，但我的工作方式类似于示例。
标签： jquery html css modal-dialog materialize