0

我发现这个教程几乎完全符合我的要求：

http://webstutorial.com/jquery-popup-jquery-slide-popup/jquery

除了它在正文加载时运行，我试过让它在点击时运行，但我无法让它工作，谁能帮我让它在我点击按钮而不是加载时运行？

JS

function openOffersDialog() {
    $('#overlay').fadeIn('fast', function() {
    $('#overlay').css('z-index', 100);
    $('#overlay').css('opacity', 0.8);
    $('#overlay').css('background', '#000000');
    $('#boxpopup').css('display','block');
    $('#boxpopup').animate({'left':'30%'},500);
    });
}


function closeOffersDialog(prospectElementID) {
$(function($) {
    $(document).ready(function() {
        $('#' + prospectElementID).css('position','absolute');
        $('#' + prospectElementID).animate({'left':'-100%'}, 500, function()       {
            $('#' + prospectElementID).css('position','fixed');
            $('#' + prospectElementID).css('left','100%');
            $('#overlay').fadeOut('fast');
        });
    });
});
 }

CSS

#wrapper a{
cursor:pointer;
font-size:15px;
font-weight:bold;
text-decoration:underline;
}

.box {
background-color: #ffffff;
color: #888888;
height: 205px;
left: 100%;
padding: 20px;
position: fixed;
right: 30%;
top: 25%;
width: 555px;
z-index: 101;
border:5px solid #888888;
border-radius:10px;
-moz-border-radius:10px;
}

.overlay {
/*background: #000000;*/
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: -100;
/*opacity:0.5;*/
}

a.boxclose {
background: url("cancel.png") repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 26px;
left: 32px;
position: relative;
top: -33px;
width: 26px;
}

HTML

<body>
<!--<body onload="openOffersDialog();">-->
<div id="wrapper">
<div id="overlay" class="overlay"></div>

<a onclick="openOffersDialog();">Click Here To See The PopUp</a><button onclick="test();">TESTCLICK</button><button ontouchstart="test();">TESTTOUCH</button>
<div id="boxpopup" class="box">
<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
</div>
</div>
</div>

任何帮助都会很棒，谢谢。

4

1 回答 1

1

JavaScript

function closeOffersDialog(prospectElementID) {
        $('#' + prospectElementID).css('position','absolute');
        $('#' + prospectElementID).animate({'left':'-100%'}, 500, function()       {
            $('#' + prospectElementID).css('position','fixed');
            $('#' + prospectElementID).css('left','100%');
            $('#overlay').fadeOut('fast');
        });
 }
于 2012-04-06T22:10:58.327 回答