用jquery的jmodal插件模拟弹出对话框的功能

最新推荐文章于 2023-08-17 11:13:58 发布

CP_Hook

最新推荐文章于 2023-08-17 11:13:58 发布

阅读量1.8k

点赞数

分类专栏： javascript 文章标签： jquery function stylesheet javascript input class

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近想写一个用来注册的网页，但逛了一些论坛发现，注册信息其实不多：账号，密码，确认密码，邮箱。这点东西，感觉用一个网页去写确实有点累赘。而且发现，论坛里都是通过弹出一个对话框来接受用户输入的，这样实在简洁明了。个人信息的完善什么的（如添加头像），在注册之后完成更符合需求。于是乎，开始在网上各种搜索相关资料。

首先贴一个链接http://www.cnblogs.com/yl918/archive/2009/11/11/1600839.html

作者：David.xu 文章出处：yl加油吧 ( http://www.yl918.com/17584.aspx )

上面的资料很不错，我看了第一个jqmodal就觉得很符合自己的口味了。不过暂时还没去详细看其实现（之后看吧）。

还是介绍下jmodal吧，这个插件也很不错，而且网上也能搜到一些实例，jmodal下载地址：

http://code.google.com/p/jmodal/downloads/list

下载后，内附案例，以下是我改动一些后的代码

<head>
    <title>JModal Demo</title>
    <link rel="Stylesheet" type="text/css" href="css/jquery.jmodal.css"  />
    <script type="text/javascript" src="js/jquery-1.3.1.min.js" > 
   <script type="text/javascript" src="js/jquery.jmodal.js" >   
 <style type="text/css">
    body,html
    {
        font-family:Calibri;
        font-size:12px;
        height:1000px;
        line-height:18px;
        }
    
    <script type="text/javascript"><!--
        $().ready(function() {
            var txtAccount;
            $('a.register').click(function() {
                $.fn.jmodal({
                    title: 'register',
                    content: function(body) {
                        body.html('*账号：<input type="text" id="userAccount" name="userAccount" />');
                        txtAccount = $('#userAccount');
                    },
                    buttonText: { ok: 'Submit', cancel: 'No' },
                    okEvent: function(data, args) {
                    	if($.trim(txtAccount.val())==''){
                    		args.isCancelling=true;
                    		alert('required.');
                    	}
                    	else{
                    		args.isCancelling=false;
                    		alert(txtAccount.val());
                    	}
                    }
                });
            });
        })
    
</head>
<body>
<a href="javascript:void(0)" class="register">register</a>
</body>
</html>

测试的效果图：

CP_Hook

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
用jquery的jmodal插件模拟弹出对话框的功能

最近想写一个用来注册的网页，但逛了一些论坛发现，注册信息其实不多：账号，密码，确认密码，邮箱。这点东西，感觉用一个网页去写确实有点累赘。而且发现，论坛里都是通过弹出一个对话框来接受用户输入的，这样实在简洁明了。个人信息的完善什么的（如添加头像），在注册之后完成更符合需求。于是乎，开始在网上各种搜索相关资料。首先贴一个链接http://www.cnblogs.com/yl918/archive/2009/11/11/1600839.html 作者：David.xu 文章出处：yl
复制链接

扫一扫