Question

请查看整个代码，如果您将其复制并粘贴到您的HTML中，那么应该正常工作。

正如你在下面的代码中看到的，我必须为每个动作创建两组代码（jquery，css），我想要实现的是，我只需要为所有动作设置一组代码下面...

我对点击事件并不太担心，实际上我希望有两个单独的点击事件。 $("#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;
}

结束更新

我关注这个blog并且有一件事让我感到困惑的是，我创建了两个链接以便两个单独的链接工作，我必须在jquery和css中添加两次相同的代码。 ..但我认为应该有一个更好的方法来做到这一点......重复的代码只有名称差异。

我添加了代码的核心，所以为了让我的button1工作，我必须添加两个相同的代码，如下所示只有名称diff

    <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;
}

Answer 1

如果需要从不同元素的click事件执行类似的函数，可以定义单个函数，然后重复使用它：

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));
});

Answer 2

从您提供的jQuery代码，我建议的唯一改进是使用链接

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

为了避免重复代码绑定许多元素的相同功能，您可以像这样只绑定一次

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

});

这将应用于ID为btnSve和btnSaveMore

的2个元素

编辑：根据更新的问题。

所以你有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＆amp; poupContact2）。由于我不确定你的整个页面目标，我无法告诉你一个更好的模式。

Answer 3

如果除名称差异外，其他所有内容都相同，则使用类选择器而不是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;
   });
});

Answer 4

在这种情况下我会做的是创建一个只需要两个参数（你的ID）的函数。

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

然后使用：

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

这使其更易于重复使用并增强稳健性。

使代码更健壮（jquery）

4 个答案: