1

请查看整个代码，如果您将其复制并粘贴到您的 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;
}

结束更新

我正在关注这个博客，但有一件事让我感到困惑，我创建了两个链接以使这两个单独的链接正常工作，我必须在 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;
}
4

4 回答 4

2

如果需要从不同元素的点击事件中执行类似的函数，可以定义一个函数，然后复用：

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

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

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

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

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

});

这将应用于 2 个具有 idbtnSve和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 回答
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 回答
0

在这种情况下，我会做的是创建一个只接受两个参数（您的 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 回答