jqModal的使用（一）

最新推荐文章于 2024-02-05 03:04:03 发布

混进IT圈

最新推荐文章于 2024-02-05 03:04:03 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

文章标签： jquery jqmodal ViewUI

本文链接：https://blog.youkuaiyun.com/lihaiming_2008/article/details/84079757

本文介绍如何使用jqModal组件实现网页对话框功能。首先从官方网站下载jqModal和jQuery，然后将它们放入网站的Js目录，并在页面头部引入这些文件。通过简单的JavaScript代码即可创建一个弹出对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登录jqModal主页[url]http://dev.iceburg.net/jquery/jqModal/index.php[/url]可以看到全面了解该组件的信息。
我在这里只是简单的说一下初次使用的经历（边用边写），如果出现错误的话，我也会写下来。
先下载js（网站上他们叫plugin），地址是[url]http://dev.iceburg.net/jquery/jqModal/jqModal.js[/url]
再下载css（网站上他们叫styling），地址是[url]http://dev.iceburg.net/jquery/jqModal/jqModal.css[/url]
我新建一个website站点，然后分别建立Js和Css目录，把jqModal.js放到Js目录里，把jqModal.css放到Css中。补充一句，这个组件是基于jQuery开发的，所以你还需要到jQuery的官方网上下载一个jQuery组件，官方地址是http://jquery.com/，组件下载地址是[url]http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js[/url]
把jquery-1.3.2.min.js也放到Js目录中。
这样基本东西就已经准备好了，现在我们来试一个alert功能：
1、在<head></head>中间加入:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<link type="text/css" href="Css/jqModal.css" rel="Stylesheet" />
2、在<head></head>部分再写一个Js调用功能：
<script type="text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
</script>
3、现在来写body中的内容：
<a href="#" class="jqModal">弹出对话框</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>

4、预览页面，点击链接“弹出对话框”，就会看到一个灰色的对话框了。