Question

固定！

我摆弄了一下，找到了解决方案。

这是我使用的jQuery：

jQuery(function($) {

/************** event to open the popup **************/

$("a.toPopup1").click(function () {
    loading(); // loading
    setTimeout(function () { // then show popup, deley in .5 second
        loadPopup1(); // function show popup 
    }, 500); // .5 second
    return false;
});

$("a.toPopup2").click(function () {
    loading(); // loading
    setTimeout(function () { // then show popup, deley in .5 second
        loadPopup2(); // function show popup 
    }, 500); // .5 second
    return false;
});

$("a.toPopup3").click(function () {
    loading(); // loading
    setTimeout(function () { // then show popup, deley in .5 second
        loadPopup3(); // function show popup 
    }, 500); // .5 second
    return false;
});

/************** event to close the popup **************/

$(this).keyup(function (event) {
    if (event.which == 27) {
        disablePopup(); // function close pop up
    }
});

$(this).keyup(function (event) {
    if (event.which == 27) {
        disablePopup2(); // function close pop up
    }
});

$("#backgroundPopup").click(function () {
    disablePopup(); // function close pop up
});

$("#backgroundPopup").click(function () {
    disablePopup2(); // function close pop up
});

/************** start: functions. **************/

function loading() {}

var popupStatus = 0; // set value

function loadPopup1() {
    if (popupStatus == 0) { // if value is 0, show popup
        $("#toPopup1").fadeIn(0500); // fadein popup div
        $("#backgroundPopup").css("opacity", "0.7");
        $("#backgroundPopup").fadeIn(0001);
        popupStatus = 1; // and set value to 1
    }
}

function loadPopup2() {
    if (popupStatus == 0) { // if value is 0, show popup
        $("#toPopup2").fadeIn(0500); // fadein popup div
        $("#backgroundPopup").css("opacity", "0.7");
        $("#backgroundPopup").fadeIn(0001);
        popupStatus = 1; // and set value to 1
    }
}

function loadPopup3() {
    if (popupStatus == 0) { // if value is 0, show popup
        $("#toPopup3").fadeIn(0500); // fadein popup div
        $("#backgroundPopup").css("opacity", "0.7");
        $("#backgroundPopup").fadeIn(0001);
        popupStatus = 1; // and set value to 1
    }
}

function disablePopup() {
    if (popupStatus == 1) { // if value is 1, close popup
        $("#toPopup1").fadeOut("normal");
        $("#toPopup2").fadeOut("normal");
        $("#toPopup3").fadeOut("normal");
        $("#backgroundPopup").fadeOut("normal");
        popupStatus = 0; // and set value to 0
    }
}

/************** end: functions. **************/

});

我希望你们可以帮助我，我一直在努力为我的投资组合添加可点击的弹出窗口，我可以添加图片和文字。我已经能够在jquery中创建弹出窗口，但是我似乎无法使每个单独的图像显示不同的弹出窗口，并且我喜欢一些支持。

HTML：

<a href="#" class="toPopup1"><div class="image"></div></a>
<a href="#" class="toPopup2"><div class="image"></div></a>
<a href="#" class="toPopup3"><div class="image"></div></a>

<div id="toPopup1">
<div id="popup_content">Press Esc to close
    <p>Test 1.</p>
</div>
</div>
<div id="toPopup2">
<div id="popup_content">Press Esc to close
    <p>Test 2.</p>
</div>
</div>
<div id="toPopup3">
<div id="popup_content">Press Esc to close
    <p>Test 3.</p>
</div>
</div>
<div id="backgroundPopup"></div>

CSS：

.image {
width: 100px;
height: 75px;
margin: 20px;
float: left;
background-color: blue;
}

#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}

#toPopup1 {
padding: 10px;
background: #FFFFFF;
color: #000000;
display: none;
font-size: 14px;
left: 50%;
margin-left: -200px;
position: fixed;
top: 40%;
width: 400px;
z-index: 2;
}

#toPopup2 {
padding: 10px;
background: #FFFFFF;
color: #000000;
display: none;
font-size: 14px;
left: 50%;
margin-left: -200px;
position: fixed;
top: 40%;
width: 400px;
z-index: 2;
}

#toPopup3 {
padding: 10px;
background: #FFFFFF;
color: #000000;
display: none;
font-size: 14px;
left: 50%;
margin-left: -200px;
position: fixed;
top: 40%;
width: 400px;
z-index: 2;
}

div#popup_content {
margin: 4px 7px;
}

jQuery的：

$(document).ready(function () {
//POPUP1

$("a.toPopup1").click(function () {
    loading(); // loading
    setTimeout(function () { // then show popup, deley in .5 second
        loadPopup(); // function show popup 
    }, 500); // .5 second
    return false;
});

/* event to close the popup */

$(this).keyup(function (event) {
    if (event.which == 27) {
        disablePopup(); // function close pop up
    }
});

$("#backgroundPopup").click(function () {
    disablePopup(); // function close pop up
});

/************** start: functions. **************/

function loading() {}

var popupStatus = 0; // set value

function loadPopup() {
    if (popupStatus == 0) { // if value is 0, show popup
        $("#toPopup1").fadeIn(0500); // fadein popup div
        $("#backgroundPopup").css("opacity", "0.7");
        $("#backgroundPopup").fadeIn(0001);
        popupStatus = 1; // and set value to 1
    }
}

function disablePopup() {
    if (popupStatus == 1) { // if value is 1, close popup
        $("#toPopup1").fadeOut("normal");
        $("#backgroundPopup").fadeOut("normal");
        popupStatus = 0; // and set value to 0
    }
}

/************** end: functions. **************/

});

这里是JSFiddle：http://jsfiddle.net/ws29G/4/

使用jQuery制作多个不同的弹出窗口

0 个答案: