<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="hasMany"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title title"></h4> </div> <div class="modal-body" id="items"> Your content goes here </div> <button type="button" id="tre" class="btn btn-default" >اغلاق</button> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">اغلاق</button> </div> </div> </div> </div>

#items ul{ list-style: square; font-size: 14px; /*display: none;*/ direction: rtl; } #items ul li{ cursor: pointer; transition: all .3s cubic-bezier(1.42, 0, 5.44, 1.98); } #items ul li:hover{ padding-right: 10px; }

var item = [{"id":3,"tend_title":"\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646: \u062a\u062d\u0648\u064a\u0644 \u0627\u064a psd \u0627\u0644 html5 ,css3 ,bootstrap","tend_disc":"fdewert","doc_price":120,"deposit":100,"add_date":"2017-07-05","start_date":null,"end_date":null,"currency_id":1,"type_id":1,"company_id":1,"source_id":1,"cat_id":8,"img":"\/storage\/tenders\/akbar\/2017\/07\/05\/5325281.jpg","attach":"","tend_slug":"\u0627\u0633\u062a\u0641\u0633\u0627\u0631-\u0639\u0646:-\u062a\u062d\u0648\u064a\u0644-\u0627\u064a-psd-\u0627\u0644-html5-,css3-,bootstrap","free":0,"active":1,"add_by":1,"user_id":null,"created_at":"2017-07-10 03:00:58","updated_at":"2017-07-10 03:00:58"},{"id":4,"tend_title":"\u0639\u063a\u0641\u0642\u062b","tend_disc":"\u063a\u0641\u0642\u062b43\u0642\u0641","doc_price":544,"deposit":15,"add_date":"2017-07-05","start_date":null,"end_date":"2017-07-10","currency_id":1,"type_id":1,"company_id":4,"source_id":1,"cat_id":8,"img":"\/storage\/tenders\/akbar\/2017\/07\/05\/5325281.jpg","attach":"","tend_slug":"\u0639\u063a\u0641\u0642\u062b","free":0,"active":1,"add_by":1,"user_id":null,"created_at":"2017-07-10 03:05:28","updated_at":"2017-07-10 03:05:28"},{"id":5,"tend_title":"\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646: \u062a\u062d\u0648\u064a\u0644 \u0627\u064a psd \u0627\u0644 html5 ,css3 ,bootstrap","tend_disc":"ytre3w2","doc_price":150,"deposit":100,"add_date":"2017-07-05","start_date":null,"end_date":"2017-07-06","currency_id":1,"type_id":1,"company_id":1,"source_id":1,"cat_id":1,"img":"\/storage\/tenders\/akbar\/2017\/07\/05\/5325281.jpg","attach":"","tend_slug":"\u0627\u0633\u062a\u0641\u0633\u0627\u0631-\u0639\u0646:-\u062a\u062d\u0648\u064a\u0644-\u0627\u064a-psd-\u0627\u0644-html5-,css3-,bootstrap","free":0,"active":1,"add_by":1,"user_id":null,"created_at":"2017-07-10 03:07:11","updated_at":"2017-07-10 03:07:11"},{"id":6,"tend_title":"\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646: \u062a\u062d\u0648\u064a\u0644 \u0627\u064a psd \u0627\u0644 html5 ,css3 ,bootstrap","tend_disc":"ytre3w2","doc_price":150,"deposit":100,"add_date":"2017-07-05","start_date":null,"end_date":"2017-07-06","currency_id":1,"type_id":1,"company_id":5,"source_id":1,"cat_id":1,"img":"\/storage\/tenders\/akbar\/2017\/07\/05\/5325281.jpg","attach":"","tend_slug":"\u0627\u0633\u062a\u0641\u0633\u0627\u0631-\u0639\u0646:-\u062a\u062d\u0648\u064a\u0644-\u0627\u064a-psd-\u0627\u0644-html5-,css3-,bootstrap","free":0,"active":1,"add_by":1,"user_id":null,"created_at":"2017-07-10 03:08:38","updated_at":"2017-07-10 03:08:38"},{"id":7,"tend_title":"\u062a\u0648\u0631\u064a\u062f","tend_disc":"\u062a\u0646\u0641\u064a\u0630 \u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0623\u0633\u0640\u0648\u0627\u0631 \r\n \u0648\u0627\u0644\u064a\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0645\u0634\u0631\u0648\u0639 \r\n \u0627\u0644\u0627\u0633\u0643\u0627\u0646 \u0627\u0644\u0645\u062a\u0648\u0633\u0637 \u00ab\u062f\u0627\u0631 \u0645\u0635\u0631\u00bb \r\n \u0628\u0627\u0644\u062f\u064a\u0646\u0629.","doc_price":200,"deposit":100,"add_date":"2017-07-05","start_date":null,"end_date":"2017-08-16","currency_id":1,"type_id":1,"company_id":6,"source_id":1,"cat_id":11,"img":"\/storage\/tenders\/akbar\/2017\/07\/05\/5325281.jpg","attach":"","tend_slug":"\u062a\u0648\u0631\u064a\u062f","free":0,"active":1,"add_by":1,"user_id":null,"created_at":"2017-07-10 12:44:55","updated_at":"2017-07-10 12:44:55"},{"id":8,"tend_title":"\u062a\u0646\u0641\u064a\u0630 \u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0623\u0633\u0640\u0648\u0627\u0631 \u0648\u0627\u0644\u064a\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0627\u0633\u0643\u0627\u0646 \u0627\u0644\u0645\u062a\u0648\u0633\u0637","tend_disc":"\u062a\u0646\u0641\u064a\u0630 \u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0623\u0633\u0640\u0648\u0627\u0631 \r\n \u0648\u0627\u0644\u064a\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0645\u0634\u0631\u0648\u0639 \r\n \u0627\u0644\u0627\u0633\u0643\u0627\u0646 \u0627\u0644\u0645\u062a\u0648\u0633\u0637 \u00ab\u062f\u0627\u0631 \u0645\u0635\u0631\u00bb \r\n \u0628\u0627\u0644\u062f\u064a\u0646\u0629.","doc_price":null,"deposit":100,"add_date":"2017-07-05","start_date":null,"end_date":"2017-08-16","currency_id":1,"type_id":1,"company_id":7,"source_id":1,"cat_id":13,"img":"\/storage\/tenders\/akbar\/2017\/07\/05\/5325281.jpg","attach":"","tend_slug":"\u062a\u0646\u0641\u064a\u0630-\u0623\u0639\u0645\u0627\u0644-\u0627\u0644\u0623\u0633\u0640\u0648\u0627\u0631--\u0648\u0627\u0644\u064a\u0648\u0627\u0628\u0627\u062a-\u0627\u0644\u062e\u0627\u0635\u0629-\u0628\u0645\u0634\u0631\u0648\u0639--\u0627\u0644\u0627\u0633\u0643\u0627\u0646-\u0627\u0644\u0645\u062a\u0648\u0633\u0637","free":0,"active":1,"add_by":1,"user_id":null,"created_at":"2017-07-10 12:55:35","updated_at":"2017-07-10 12:55:35"}]; var elm = '<br /><ul>'; $.each(item , function(key) { elm += ('<li class="hasManyItem" data-id='+item[key]['id']+'>'+item[key]['tend_title']+ '</li>'); }); $('.title').html('<i class="fa fa-exclamation-circle"></i> يوجد '+ item.length +' اضافات متطابقة '); $('#items').html(elm+'</ul>'); $('#hasMany').modal('show'); $('#items ul li').click(function(){ alert('clock'); }); $('#tre').click(function(){ alert('clock'); });