1

コード全体を見てください。それをコピーして html に貼り付けると、動作するはずです。

以下のコードでわかるように、すべてのアクション (jquery、css) に対して 2 つのコード セットを作成する必要があります。達成しようとしているのは、以下のすべてのアクションに対して 1 つのコード セットが必要なだけです。 .

私はクリックイベントについてあまり心配していません.実際には、その2つの別々のクリックイベントが必要です. $("#button").click(function(){...}、$("#button1").click(function(){...}

更新しました：

html:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
    <link rel="stylesheet" href="general.css" type="text/css" media="screen" />
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="popup.js" type="text/javascript"></script>
</head>
<body>
    <center>
        <div id="button">
            <input type="submit" value="button" /></div>
        <div id="button1">
            <input type="submit" value="button1" /></div>
    </center>
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>
            Title of our cool popup, yay!</h1>
        <p id="contactArea">
            Here we have a simple but interesting sample of our new stuning and smooth popup. 
        </p>
    </div>
    <div id="popupContact1">
        <a id="popupContactClose1">x</a>
        <h1>
            one more, yay!</h1>
        <p id="contactArea1">
            Here we have a simple but interesting sample of our new stuning and smooth popup. 
        </p>
    </div>
    <div id="backgroundPopup">
    </div>
    <div id="backgroundPopup1">
    </div>
</body>
</html>

jquery:

var popupStatus = 0;
var popupStatus1 = 0;

//loading popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({"opacity": "0.7" });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//loading popup with jQuery magic!
function loadPopup1() {
    //loads popup only if it is disabled
    if (popupStatus == 0) {
        $("#backgroundPopup1").css({ "opacity": "0.7" });
        $("#backgroundPopup1").fadeIn("slow");
        $("#popupContact1").fadeIn("slow");
        popupStatus1 = 1;
    }
} 

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//disabling popup with jQuery magic!
function disablePopup1(){
    //disables popup only if it is enabled
    if(popupStatus1==1){
        $("#backgroundPopup1").fadeOut("slow");
        $("#popupContact1").fadeOut("slow");
        popupStatus1 = 0;
    }
} 

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });
}

//centering popup
function centerPopup1() {
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact1").height();
    var popupWidth = $("#popupContact1").width();
    //centering
    $("#popupContact1").css({
        "position": "absolute",
        "top": windowHeight / 2 - popupHeight / 2,
        "left": windowWidth / 2 - popupWidth / 2
    });
    //only need force for IE6

    $("#backgroundPopup1").css({
        "height": windowHeight
    });

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function()
{
    //LOADING POPUP
    //Click the button event!
    $("#button").click(function(){
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });

    $("#button1").click(function () {
        //centering with css
        centerPopup1();
        //load popup
        loadPopup1();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
});
//Click the x event!
$("#popupContactClose1").click(function () {
    disablePopup1();
});

//Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
});

$("#backgroundPopup1").click(function () {
    disablePopup1();
});

    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
        if(e.keyCode==27 && popupStatus1==1){
            disablePopup1();
        }
    });

});

CSS

#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#backgroundPopup1{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact1{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContact1 h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#popupContactClose1{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
#button1{
text-align:center;
margin:100px;
}

更新終了

私はこのブログをフォローしていますが、行き詰まったことが1つあります。2つの別々のリンクが機能するために作成した2つのリンクがあり、jqueryとcssで同じコードを2回追加する必要があります...しかし、私はそこで考えていますそれを行うためのより良い方法である必要があります... diffという名前だけでコードを複製します。

コードのコアを追加したので、button1 を機能させるには、以下に示すように同じコードを diff という名前で 2 回追加する必要があります

    <div id="button"><input type="submit" value="Press me please!" /></div>
    <div id="button1"><input type="submit" value="Press one more time!" /></div>


   <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Title of our cool popup, yay!</h1>
        <p id="contactArea">
            Here we have a simple but interesting sample 
        </p>
    </div>

jquery のソース コードは次のとおりです。

$("#backgroundPopup1").css({
        "opacity": "0.7"
    });
    $("#backgroundPopup1").fadeIn("slow");
    $("#popupContact1").fadeIn("slow");

.css

#popupContact  {
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
4

4 に答える 4

2

異なる要素のクリック イベントから同様の関数を実行する必要がある場合は、1 つの関数を定義して再利用できます。

var myPopupFn = function($this){
  //do something to the element that is passed in
  $this.css({/* etc */});
}

$("#button1").click(function(){
   myPopupFn($(this));
});

$("#button2").click(function(){
   myPopupFn($(this));
});
于 2012-04-25T18:57:10.457 に答える
1

名前の違いを除いてすべて同じである場合は、IDセレクターの代わりにクラスセレクターを使用してください。

<a class="myLink" id="Link1" >Link1</a>
<a class="myLink" id="Link2" >Link1</a>

JS： 

$(function () {
   $('.myLink').click (function (e) {            
       $(this).css(/*{...}*/);
       //... Your code
       return false;
   });
});
于 2012-04-25T19:04:17.753 に答える
1

あなたが提供したjQueryコードから、私が提案する唯一の改善点はチェーンを使用することです

$("#backgroundPopup1").css({ "opacity": "0.7"}).fadeIn("slow");
$("#popupContact1").fadeIn("slow");

多くの要素に対して同じ機能をバインドするためのコードの繰り返しを避けるために、このように一度だけバインドすることができます

$(function(){
 
  $("#btnSave,#btnSaveMore").click(function(e){
    //do your stuff here
  });

});

これは、idbtnSveとを持つ 2 つの要素に適用されます。btnSaveMore

編集：更新された質問に従って。

したがって、2 つのボタンのコードが重複しています。このように書き直してみましょう。

HTML マークアップにいくつかの変更を加えましょう。ボタンに ID を付与して、どのボタンがクリックされているかを識別します。

<input id="btn-1" type="submit" value="button" /></div>
<input id="btn-2" type="submit" value="button1" /></div>

<div id="popupContact1"></div>
<div id="popupContact2"></div>
<div id="backgroundPopup1"></div>
<div id="backgroundPopup2"></div>

次に、JavaScriptに行きましょう。

$(document).ready(function(){

   $("input[type='submit']").click(function(){
       var id=$(this).attr("id").split("-")[1]; //this will give us either 1 or 2 
       CenterPopup(id);
       LoadPopup(id)
   });    
});
var popupStatus = 0;
function CenterPopup(itemId)
{
  var item=$("#popupContact"+itemId);
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = item.height();
  var popupWidth = item.width();

  item.css({"position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
   });   
  $("#backgroundPopup"+itemId).css({
     "height": windowHeight
  });

}

function LoadPopup(itemId)
{     
 if(popupStatus==0){
    var item=$("#backgroundPopup"+itemId)
    item.css({"opacity": "0.7" });
    item.fadeIn("slow");
    $("#popupContact"+itemId).fadeIn("slow");
    popupStatus = 1;
  }
}

実際のデモ http://jsfiddle.net/3FbbC/7/

これは、あなたが言及したレイアウトと JavaScript コードで機能するはずです。しかし、なぜ同じ目的で2つのdivが必要なのか（popContact1とpoupContact2）、私は真剣に理解していません。あなたのページ全体の目的がよくわからないので、より良いパターンを教えることはできません.

于 2012-04-25T18:54:41.370 に答える
0

このような状況で私がすることは、単純に 2 つの引数 (ID) を取る関数を作成することです。

function whatever(id1, id2) {
    $("#"+id1).css({ "opacity": "0.7"}).fadeIn("slow");
    $("#"+id2).fadeIn("slow");
}

次に使用します。

whatever("backgroundPopup1", "popupContact1");
whatever("backgroundPopup2", "popupContact2");

これにより、再利用性が向上し、堅牢性が向上します。

于 2012-04-25T18:58:53.580 に答える