声明 阅读本文需要有一定的HTML、CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单：将待显示的内容先隐藏，在触发某种条件后（如点击按钮），将原本隐藏的内容显示出来。 实现 <!DOCTYPE html> <html> <head><title>Window对象</title><meta charset="utf-8"> </head> <body> <a href="http://www.baidu.com">百度一下</a> <button type="button" id="open">打开弹出层</button> <div style="display: none;background: li...
一、JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息！"); } //弹出一个询问框，有确定和取消按钮 function firm() { //利用对话框返回的值 （true 或者 false） if (confirm("你确定提交吗？")) { alert("点击了确定"); } else { alert("点击了取消"); } } //弹出一个输入框，输入一段文字...
在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息。如果用迁移画面的方式处理，速度会比较慢，而且用户体验不是太好。如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话，处理速度很快，而且用户感觉也比较新颖。下面我以某个对日电子商务网站为实例说明下它的实现方式。 1、jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id="lrVo" status="st...
a.html: <form name="form1" method="post" action=""><a href="javascript:void(null)" class="add" onClick="open(b.html,,resizable=1,scrollbars=1,status=no,toolbar=no,menu=no,width=500,height=400,left=150,top=50)">增加</a><input type="text" name="text1"></form>b.html: <script language="javascript" type="text/javascript">function returnValue(){window.opener.document.all.text1.value=document.getElementB...
思路：用window.showModalDialog方法获取到弹出子窗体的引用，再在子页面用window.returnValue="***"来返回结果。 示例代码：（用jQuery简化实现） 父页面：parent.html <!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" />...
<a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a> <div data-role="popup" id="login" data-theme="a"> <form style="padding:10px 20px;"> <h3>Please sign in</h3> <label for="un" class="ui-hidden-accessible">Username:</label> <input type="js" name="user" id="un" placeholder="username" /> <label for="pw" class="ui-hidden-accessible">Password:</label> <input type="p...
最近在研究弹出层插件时发现网上很多插件功能很强大，同时插件也很庞大。在这里个人写了一个比较秀珍的弹出层插件。jquery.popdialog.js$(function () { $.fn.PopDialog = function (options) { var defaults = { Event: "click", //触发响应事件 title: "title", //弹出层的标题 type: "text", //弹出层类型(text、容器ID、URL、Iframe) content: "content", //弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址) width:...
本文主要来学习一下JavaScript插件--弹出框。 案例 为页面内容添加一个小的覆盖层，就像iPad上的效果一样，为页面元素增加额外的信息。 先来看几个简单的静态案例效果图效果比较简单主要就是静态的弹出的小窗体，分为窗体标题和窗体内容。 <div class="bs-example bs-example-popover"><div class="popover top"><div class="arrow"></div><h3 class="popover-title">Popover top</h3><div class="popover-content"><p>Sed posuere...
<input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker "> <input class="canlderImg" data-tag="start" type="image" src="../../i/canlder1.png"> <span>结束:</span> <input id="endDate" value="" readonly="true" type="text" style="cursor:pointer;" class="user_datepicker"> <input class="canlderImg" data-tag="end" type="image" src="../../i/canlder1.png" >...
客户的网站上突然需要一个遮罩弹窗效果，也可以称作暗箱之类的，具体效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见，例如：QQ空间浏览相册等。这种效果的好处就是，可以让用户聚焦到弹出的菜单中。 神说，有代码的文章，应该有个 Demo ，于是就有了Demo。 HTML 结构 首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上面还有一个内容层。触发的按钮，...
本文实例讲述了jquery点击弹出可放大居中关闭对话框。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： <!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点击弹出可放大居中关闭对话框...
方法一： $(.shade).bind( "touchmove", function (e) {e.preventDefault(); }); 方法二： $("body,.main").height($(window).height()).css({"overflow-y": "hidden" });以上这篇弹出遮罩层后禁止滚动效果【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
一、去除滚动条方法给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性样式中需要对IE6、7及其它浏览器用hack辨别，这是因为当页面拉到下面时如果html或body被overflow:hidden，透明弹层下面的页面就会被部分正常隐藏，通过透明看到的一片的灰度，具体颜色跟平台及用户设置背景色有关。body或html去掉滚动条后，页面会有一个滚动条宽度/2的跳动！这个跳动对用户体验来十分不好，因此给body...
找了个别人写的遮掩层进行改善，感觉效果还可以。 效果图：代码： <!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><title>tipswindown</title><link href="css/tipswindown.css" rel="stylesheet" type="text/css" /><script src="js/jquery-1.8.js" type="text/javascript"></script><script sr...
为页面内容添加一个小的覆盖层，就像iPad上的效果一样，为页面元素增加额外的信息。 插件依赖 弹出框依赖工具提示插件，因此需要先加载工具提示插件。 选择性加入的功能 出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须自己初始化他们。 弹出框在按钮组和输入框组中使用时，需要额外的设置 当提示框与.btn-group 或 .input-group联合使用时，你需要指定container: body选项（见下面的文档）以...