变化jQuery的弹出窗口的onload的点击功能

我发现这个教程，几乎不正是我想要的东西：变化jQuery的弹出窗口的onload的点击功能

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

除了它运行时，身体的负荷，我已经试过了前往运行onclick，但我不能得到它的工作，任何人都可以帮助我让它运行时，我点击一个按钮，而不是当它加载？

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>

任何帮助将是巨大的，谢谢。

来源

2012-04-06 mao

的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-06 22:10:58 msigman

优秀的，谢谢。 – mao 2012-04-06 22:18:49

变化jQuery的弹出窗口的onload的点击功能

回答

相关问题