商品列表弹出遮罩层

今天我遇到了一个问题,就是需要在商品列表后面添加一个推送,然后跳出一个遮罩层。并在遮罩层中完成相关操作,
这个刚开始以为很简单,用JS好像松松就能搞定,后来发现不对。
因为商品列表由php自行生成,如何获得某一条商品的对象成了难题。
后面考虑用for循环来解决,结果发现在JS中,for循环 获得的i总是最后一个,这样不能解决问题。
并且因为使用了JQ插件,跳出遮罩层必须用到<a>标签,而<a>标签内没有value和name属性。所以无法用JS获取。
最后在<a>标签中新建一个button,通过class="send" nam="{goods.id}" 和this.name。这两个属性来获取商品信息,并在遮罩层中

显示。
主要代码:

  1. //遮罩层代码,用hidden来储存商品信息 
  2. <div id="myModal" class="reveal-modal"> 
  3.         <h1> 
  4.             遮罩层 
  5.         </h1> 
  6.         <p> 
  7.         <form action="{:U('test')}" method="post"> 
  8.             <input type="submit" class="btn submit-btn " value="筛选"/> 
  9.         <input type="hidden" id="sendform"  name="source_id" value=""/> 
  10.         </form> 
  11.         </p> 
  12.         <a class="close-reveal-modal">× 
  13.    </div> 
  14. //推送代码 
  15. <td><a href="__ROOT__/shares/item/{$goods['id']}.html" target="_blank">{$goods.title}</a> 
  16. <a href="#"class="big-link" data-reveal-id="myModal"> 
  17. <button class="send btn" name="{$goods['id']}">推送</button>  
  18. </a> 
  19. </td> 
  20. //JS代码 
  21. <script type="text/javascript"> 
  22.         $('.send').click(function(){ 
  23.             $('#sendform').val(this.name); 
  24.         }); 
  25.     </script> 

很简单吧,是自己想多了

波比源码 – 精品源码模版分享 | www.bobi11.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!

波比源码 » 商品列表弹出遮罩层

发表评论

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系站长
赞助VIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡