最小化Javascript/jQuery弹出窗口的代码Windows

我正在创建一个展示演示材质的个人网站，我希望允许用户单击缩略图，这会导致一个小窗口向下动画并显示详细信息。目前，我的工作很完美，但随着我继续添加项目，代码变得非常重复。我不得不重复所有这些代码“item2”，“item3，”等等...有没有一种更有效的方法来处理这可能有一个脚本，也许1动画包含我的内容框？我是jQuery和Javascript的新手，我想更好地简化我的代码。最小化Javascript/jQuery弹出窗口的代码Windows

下面是我使用的是什么：

<script type="text/javascript"> 
$(function() { 
$('#activator_item1').click(function(){ 
    $('#overlay').fadeIn('fast',function(){ 
     $('#box_item1').animate({'top':'250px'},500); 
    }); 
    }); 
    $('#boxclose_item1').click(function(){ 
    $('#box_item1').animate({'top':'-500px'},500,function(){ 
     $('#overlay').fadeOut('fast'); 
    }); 
    }); 

}); 
</script>

CSS

.box_item1{ 
     position:fixed; 
     top:-800px; 
     height:400px; 
     width:550px; 
     left:30%; 
     right:30%; 
     background-color:#fff; 
     color:#333; 
     padding:20px; 
     border:2px solid #ccc; 
     -moz-border-radius: 20px; 
     -webkit-border-radius:20px; 
     -khtml-border-radius:20px; 
     -moz-box-shadow: 0 1px 5px #333; 
     -webkit-box-shadow: 0 1px 5px #333; 
     z-index:101; 
     text-align:left; 
    } 
    .box_item1 h1{ 
     border-bottom: 1px solid #7F7F7F; 
     margin:-20px -20px 0px -20px; 
     padding:10px; 
     background-color:#1E87BE; 
     color:#fff; 
     font-family:"Arial Black", Gadget, sans-serif; 
     -moz-border-radius:20px 20px 0px 0px; 
     -webkit-border-top-left-radius: 20px; 
     -webkit-border-top-right-radius: 20px; 
     -khtml-border-top-left-radius: 20px; 
     -khtml-border-top-right-radius: 20px; 
    } 
    a.boxclose_item1{ 
     float:right; 
     width:26px; 
     height:26px; 
     background:transparent url(images/cancel.png) repeat top left; 
     margin-top:-30px; 
     margin-right:-30px; 
     cursor:pointer; 
    } 
    a.activator_item1{ 
     width:153px; 
     height:150px; 
     position:relative; 
     top:0px; 
     left:0px; 
     z-index:1; 
     cursor:pointer;

HTML

<div id="item1"><a class="activator_item1" id="activator_item1"><img src="images/item1_button.png"/></a></div> 

<div class="overlay" id="overlay" style="display:none;"></div> 

<div class="box_item1" id="box_item1"> 
    <a class="boxclose_item1" id="boxclose_item1"></a> 
    <h1>Title</h1> 

    <h2>Content</h2> 
    <h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3> 

</div> 
</div>

来源

2012-02-11 Chance

使用CSS类以正确的方式 - 你可以有一个规则'.activator_item'，'.box_item'等，没有重复你的CSS。接下来，创建一个JavaScript函数来弹出一个窗口。 – Ryan 2012-02-11 18:02:05

你是相当接近。而不是通过“id”选择元素，而是使用它们相关的类来选择它们（使用点“。”而不是“＃”），例如。 $（'。activator_item1'） - 这会将相同的代码应用于所有activator_items。

来源

2012-02-11 18:07:34

这可以通过更好的命名来解决。对于每个元素你都有一个独特的类，这会让你失去类的分组能力。考虑分离类以更好地访问迭代器。例如，您有<a class="activator_item1" id="activator_item1">，您可以在其中代替<a class="activator item1" id="activator_item1">。这将允许你在JQuery的选择所有的活化剂，并在它们之间迭代：

$('.activator').each(function() { 
    //your code 
});

来源

2012-02-11 18:12:26 Rick

最小化Javascript/jQuery弹出窗口的代码Windows

回答

相关问题