[問題] 如何在append之後不影響原本的layout呢?
最近剛開始接觸jQuery，跟著書本做類似lightbox的範例，
html是文繞圖的樣式，點文中的縮圖會出現黑色背景當襯底的原圖，
範例是建立一個新的黑色半透明的div當作背景，可是在append或是移除之後，
內文都會隨著div更改編排，請問應該怎麼做才能讓彼此的layout是獨立的呢？
先謝謝各位了 :)
<script type="text/javascript"
src="" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var background=$('<div/>');
$(background).attr('id','overBlackground').animate({'opacity':'.8'},1000).css({'width':$(document).width(),'height':$(document).height(),'background':'#000',"z-index":"3",'position':'absolute','clear':'both','display':'none'});
$('body').append(background);
$('#theImage').click(function(){
$('#overBlackground').fadeIn('slow');
var newImage=$('<img/>');
var width=$('body').width();
var height=$('body').height();
$(newImage).attr('src',$(this).attr('src')).attr('id','largeImage').css({'position':'absolute','clear':'both','left':(width-$(this).width())/2,'top':(height-$(this).height())/2,"z-index":"4"});
$('body').append(newImage).children('#theImage').hide();
$(newImage).fadeIn(2000,function(){
$(this).bind('click',function(){$(this).fadeOut(1000);
$('div#overBlackground').fadeOut(1000,function(){
$(this).fadeOut('slow');
})
})
})
})
});
$('body').append(background);
</script>
<style type="text/css">
*{margin:0;
padding: 0;}
img{
float: left;
padding: 5px 5px 5px 0px;
}
</style>
<p>
<img src="n.jpg"
width="350" height="250" id="theImage">
Greek politicians trade insults and accusations following efforts to form a
unity government -- increasing the possibility of a new poll in the
debt-stricken country.If you use jQuery a lot it can be a good idea to
package your code into plugins. In this article I’m going to explain how to
build two plugins from scratch.</p>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.166.199.171
推
05/14 18:39, , 1F
05/14 18:39, 1F
好滴好滴:)
※ 編輯: phoenix09 來自: 218.166.199.171 (05/14 18:45)