jqueryポップアップボックスの使用例(1)_jquery

最近あるプロジェクトでポップアップボックスに関する機能が多く、ポップアップボックスなんて簡単に実装できるものだと思っていたのですが、最近この機能を実装し始めました。私が考えていなかった問題がたくさんあることに気づきました。
たとえば、追加、削除、および変更のためのいくつかのポップアップ ボックスに関して、一部のユーザーを追加する場合、ユーザーに関する一部の情報、パスワードの設定、およびその他の情報を変更するときにポップアップ ボックスに送信する必要があります。パスワードなどを変更する場合は、ユーザー名とID番号を入力してください。

例は次のとおりです。

コードをコピーします コードは次のとおりです:

• 
  🎜>
  
  

  
  

  ブルーメイプルフロントエンド

  問い合わせを追加 【10】
  

  問い合わせを追跡【1000 ] dd>
  

  
  
• close">
  
  
  

  
  

  ブルーメープルフロントエンド dt>
  

  問い合わせを追加【10】

  
  

  問い合わせを追跡【1000]
  

  
  
• 
  

  contentid= ".pwdTips">ブルー メープル フロント エンド問い合わせを追加【10】 ; dd>追跡問い合わせ【』
  

🎜>

ブルー メイプル フロント エンド

問い合わせを追加【10】 dd> ;

追跡【】

ブルーメープルフロントエンド

問い合わせを追加【10]

追跡【】

dl> >

追加

ポップアップ ボックスの内容:




コードをコピー


コードは次のとおりです:

用户名：

营销客服：

登录密码：

确认密码：

确认
取消

实现的弹出框的js

复制代码代码如下:

$(function(){
var $window = $(ウィンドウ),
$doc = $(ドキュメント),
$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 bodyHeight=$(window); height() ;
var bodyWidth=$(window).width() ;

if(!pwdTips.is(":hidden")){
pwdTips.css({
位置: "固定",
上: (bodyHeight-height)/2,
left:(bodyWidth-width)/2
});
/*弹出框定位置束*/
/*弹出框半透明背景の配置*/
var bgShadow = function(zindex) {
zindex = zindex?zindex:999; var _bg = $('div.pwdTipsBg'),
bg_html = '

';
if(_bg.length === 0) {
_bg = $(bg_html);
}
$body.append(_bg)
_bg.css({
位置 : '絶対',
トップ : '0px',
左 : '0px'、
幅 : $window.scrollLeft() $window.width() 'px'、
高さ : $doc.height()、
'z-index' : zindex
});
return _bg;
};

/*弹出半透明背景の設置*/
/*绑定イベント*/

var bindingClick = function(obj,handlerEvent){
obj.bind( "click",function(e){
e.preventDefault();
var select=$(this).attr('contentid'); $(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('価値'、""）;

$('#pwdRest').find('#userName').show();

}
else
{

$('#pwdRest').find('#userName').hide();
$('#opename').attr('value',obj.text());
$("input.shareId").attr('value',obj.attr('id'))
}

}
$(function(){
bindingClick(show,setValue);
bindClick(addPanelBtn,setValue);
})


すべての出力コンテンツは状況に応じて判断表示し、対応する値を取得し、最初に操作の種類に基づいて暗号コードの変更かゲスト サービスの追加かを判断し、その後、対応する出力コンテンツを再表示します。