<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery写的弹出窗口</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $("#container").fadeIn(800); $("<div id='mask'></div>").appendTo("body"); $("#mask").css("opacity","0.6"); }); $("#shut").click(function(){ $("#mask").remove(); $("#container").hide(); }); }) </script> <style type="text/css"> html, body { width:100%; height:100%; } #container { width:400px; height:300px; border:20px #99CC00 ridge; text-align:center; display:none; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; z-index:10; background-color:#99CC00; } label, input { padding:5px; margin:5px; } ul,li{ list-style:none;} #mask { width:100%; height:100%; position:absolute; background-color:#000; left:0; top:0; z-index:8; } </style> </head> <body> <p>JQuery写的一个弹出窗口</p> <input type="button" id="btn" value="注册会员" /> <div id="container"> <ul> <li>昵称: <input type="text" /> </li> <li>密码: <input type="text" /> </li> <li>确认: <input type="text" /> </li> <li>邮箱: <input type="text" /> </li> </ul> <label> <input type="submit" value="提交"/> <input type="reset" value="重设" /> </label> <input type="button" value="关闭弹出窗" id="shut" /> </div> </body> </html>
相关推荐
jquery 弹出模态窗体
使用jQuery创建模态窗口登陆效果 演示地址:http://www.jq22.com/plugin/149
几个基于Juqery的模态窗口,另推荐个论坛,脚本之家:http://www.jb51.net/
JQuery实现可移动模态窗口 JQuery实现可移动模态窗口 JQuery实现可移动模态窗口
//id为blocked的元素设置为只读 $('#blocked').unblock();//解除 实现的思路: 我在主窗体中创建一个层,用来作为弹出窗体,包含一个iframe,通过参数指定URL,作为显示的内容,我觉得可能会有利于代码的重用,...
正好项目的需要,有个客户想要模态弹出的窗体来提交网站的反馈,经过一番测试实现了,我使用jQuery fancybox插件来创建一个漂亮的模态窗体,提交表单的数据在服务器端实现Ajax调用。你可以在你的邮件里收到用户发送...
Jquery弹出可拖动Div模态层源码 源码描述: 技术特点:JQUERY和标签的完美结合 功能描述: jquery弹可拖动的Div模态层,可导入指定页面并做特定处理, 能实现子窗体传值给父窗体控件
用jquery ui制作了使用了模态窗体等,mvc
操作案例1:利用模态窗体制作百度登录框 2.2 轮播图 操作案例2:利用.Bootstrap制作携程网首页的轮播图 2.3 选项卡 2.4 折叠 操作案例3:利用Bootstrap制作导航菜单 本章总结 本章作业 第5章jQuery Mobile入门 l ...
添加按钮,点击弹出模态窗体: <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal" href="/Home/Test" rel="external nofollow" ></button> 创建模态对话框: <div...
代码为ASP.NET C#,采用asp.net和jquery异步方式实现。 用户登录采用模态弹出窗口,异步方式验证登录信息,不刷新页面。 用户注册,能检查用户名和密码是否为空,当用户输入用户名时可采用异步方式从数据库提取...
jQuery.openModal(1.0 版) 是一个免费的开源模态窗口 jQuery 插件。安装在 jQuery 库之后包含脚本: [removed][removed]用法要打开模态窗口,只需使用 var opnMdl = $.openModal({ html: 'your html code' });...
Ajax创建简单和有吸引力的 Ajax 搜索,这是继《使用jQuery打造一个实用的数据传输模态弹出窗体》第二篇jquery项目实际运用的教程,希望大家在开发项目的时候能够根据自己的实际情况灵活运用 点击搜索默认显示所有的...
Bootstrap自带了很多JQuery插件,给用户做前端开发提供了很大的方便。对于每一个插件,有2种引用方式:一是单独引用,即使用Bootstrap的单独*.js文件,这种方式需要注意...模态框(Modal)是覆盖在父窗体上的子窗体。通
用法:通过 data 属性在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置 data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有 id="identifier")。...