源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery弹出框的用法示例(一)

  • 时间:2021-03-15 23:46 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery弹出框的用法示例(一)
最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题。 比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,弹出框里要提交一些关于用户的信息,设置密码等信息,当修改的时候,根据用户的名字和id号来修改密码等等。 例子如下:
[url=]<div class="panelBox"> <dl> <dt id="dt1" contentid=".pwdTips">蓝枫前端</dt> <dd>添加询盘【<a href="">10</a>】</dd> <dd>跟踪询盘【<a href="">1000</a>】</dd> </dl> </div> </li> <li> <a href="" class="close"></a> <div class="panelBox"> <dl> <dt id="dt2" contentid=".pwdTips">蓝枫前端</dt> <dd>添加询盘【<a href="">10</a>】</dd> <dd>跟踪询盘【<a href="">1000</a>】</dd> </dl> </div> </li> <li> <a href="" class="close"></a> <div class="panelBox"> <dl> <dt id="dt3" contentid=".pwdTips">蓝枫前端</dt> <dd>添加询盘【<a href="">10</a>】</dd> <dd>跟踪询盘【<a href="">1000</a>】</dd> </dl> </div> </li> <li> <a href="" class="close"></a> <div class="panelBox"> <dl> <dt contentid=".pwdTips">蓝枫前端</dt> <dd>添加询盘【<a href="">10</a>】</dd> <dd>跟踪询盘【<a href="">1000</a>】</dd> </dl> </div> </li> <li> <a href="" class="close"></a> <div class="panelBox"> <dl> <dt id="" contentid=".pwdTips">蓝枫前端</dt> <dd>添加询盘【<a href="">10</a>】</dd> <dd>跟踪询盘【<a href="">1000</a>】</dd> </dl> </div> </li> <li> <div class="panelBox addpanelBox"> <a class="addPanelBtn" contentid="div#pwdRest">添加</a> </div> </li> </ul>
弹出框内容: 实现的弹出框的js
[u]复制代码[/u] 代码如下:
$(function(){ var $window = $(window), $doc = $(document), $body = $('body'); //关于管理员添加删除的js代码 var tabLi=$(".tabPanel").find("li"); tabLi.hover(function(){ $(this).addClass("hover").siblings().removeClass("hover"); },function(){}) /*弹出框定位*/ $(window).scroll(function() { var pwdTips =$(".pwdTips"); var height=pwdTips.height(); var width=pwdTips.width(); var bodyHieght=$(window).height() ; var bodyWidth=$(window).width() ; if(!pwdTips.is(":hidden")){ pwdTips.css({ position: "fixed", top: (bodyHieght-height)/2, left:(bodyWidth-width)/2 }); } }); /*弹出框定位结束*/ /*弹出框半透明背景的设置*/ var bgShadow = function(zindex) { zindex = zindex?zindex:999; var _bg = $('div.pwdTipsBg'), bg_html = '<div class="pwdTipsBg"></div>'; if(_bg.length === 0) { _bg = $(bg_html); } $body.append(_bg); _bg.css({ position : 'absolute', top : '0px', left : '0px', width : $window.scrollLeft()+$window.width()+'px', height : $doc.height(), 'z-index' : zindex }); return _bg; }; /*弹出框半透明背景的设置*/ /*绑定事件*/ var bindClick = function(obj,handlerEvent){ obj.bind("click",function(e){ e.preventDefault(); bgShadow(1001); var select=$(this).attr('contentid'); var onLineId=$(this).attr('id'); var pwdTips=$(select); if(handlerEvent!=null) { handlerEvent($(this)); } pwdTips.show(); pwdTips.find(".closeBtn,.diaSmtRst").click(function(){ pwdTips.hide(); var _bg = $('div.pwdTipsBg'); _bg.remove(); }); pwdTips.find('#onLineId').val(onLineId); }); }; var show=tabLi.find("dt"), addPanelBtn=$(".addPanelBtn"), clickBtn=$(".clickBtn"); var setValue= function(obj){ if($(obj).is('.addPanelBtn')) { $('#opename').attr('value',""); $('#pwdRest').find('#userName').show(); } else { $('#pwdRest').find('#userName').hide(); $('#opename').attr('value',obj.text()); $("input.shareId").attr('value',obj.attr('id')) } } $(function(){ bindClick(show,setValue); bindClick(addPanelBtn,setValue); bindClick(clickBtn,setValue); }); })
所有的弹出内容根据情况做判断显示,获取相应的值,先根据触发的类型判断是修改密码或者添加用户客服,然后再显示相应的弹出内容
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部