javascript - jqModal 不工作

标签 javascript html jqmodal

我试图测试 http://dev.iceburg.net/jquery/jqModal/ 中的一些工作代码了解这是如何工作的,但我无法让代码工作。我正在尝试使用弹出对话框部分,并且正在测试默认值的代码,这是示例部分中的第一个示例。这是我复制并尝试测试的内容。不起作用的部分是弹出的对话框。我收到一个错误说...未捕获的 ReferenceError: $ 未定义

<html>

<head>
<title> test </title>

<style type = "text/css">


.jqmWindow {
display:none;

position: fixed;
top: 17%;
left: 50%;

margin-left: -300px;
width: 600px;

background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}

.jqmOverlay { background-color: #000; }


# html .jqmWindow {
 position: absolute;
 top: expression((document.documentElement.scrollTop || document.body.scrollTop) +     Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

</style>

<script type = "text/javascript">
$().ready(function() {
$('#dialog').jqm();
});

</script>
</head>

<body>

<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond   this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the  "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>


</body>
</html>

最佳答案

如果你的代码确实是你的整个 HTML,那么 $ 未定义的原因是你没有包含 jQuery(它定义了 $ 并经常使用它作为简写)。您的代码既不包含 jQuery 库也不包含 jqModal 脚本。 (诚​​然,jqModal 站点上的所有示例都是摘录,而不是完整代码,因此他们认为这一步是理所当然的。)

添加

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jqModal.js"></script>

在你的<head>中,适当调整 jQModal.js 的路径。

关于javascript - jqModal 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13280797/

相关文章:

javascript - 如何检查特定数组的值并递增或递减它?

javascript - 将 2 个相关数组映射在一起

javascript - IE11 - 从第 2 页开始的表格单元格边框问题

javascript - 在标题中插入和删除字符/单词

jquery - jqDnR 插件不适用于 jQuery 1.4

javascript - jqModal/JQuery 问题,div 未更新新内容?

javascript - 需要帮助使用 IFrame 为 JQModal 实现 CloseOnEscape Key Press

javascript - 如何使喜欢和添加到购物车图标切换外观

html - 如何使用 css 将 <h3> 文本居中?

html - 扩展到整个页面宽度的 3 列 CSS 解决方案