i have simple problem. need use php generate products on page. when user clicks on quick look, should popup window , show product information. can 2 ways: first, generate popup div each product. second, generate 1 basic pop-up , fill in data product. have second version:
this div:
<div class="fixedmodalquicklook"> <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a> <div class="innermodalquicklook"> <div class="shortinfoiteminfo visible-xs col-xs-12"> <h2><a href="#" title=""> do</a></h2> </div> <div class="containerimg-social col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="imgwishlistitem "> <a href="#" title=""> <img src="images/gallery/carti2.jpg" class="img-responsive" /> </a> </div> <div class="shareitem "> <ul> <li><a href="#" title=""><i class="fa fa-facebook"></i></a> </li> <li><a href="#" title=""><i class="fa fa-google-plus"></i></a> </li> <li><a href="#" title=""><i class="fa fa-twitter"></i></a> </li> </ul> </div> </div> <div class="shortinfoiteminfo col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="buttoncartwishlist visible-xs"> <a href="javascript:void(0)" class="addtocartbuttonwl"><input type="text" placeholder="1" name="count" /> add cart</a></div> <h2 class="hidden-xs"><a href="#" title=""> hiroshige: 1 hundred famous views of edo</a></h2> <div class="stars"><img src="images/icon/stars-small.png" alt=" " title="" /> </div> <div class="pricequiklookitem">£30.88</div> <div class="buttoncartwishlist hidden-xs"> <a href="javascript:void(0)" class="addtocartbuttonwl"> <form class="wrapinput"> <input type="text" placeholder="1" size="1" id="count" onkeypress="this.style.width = ((this.value.length + 12) * 6) + 'px';" /> </form><!--</div>--> add cart </a> </div> <!--onkeypress="this.style.width = ((this.value.length + 12) * 9) + 'px';" --> </div> <div class="stocinfo col-lg-2 col-md-2 col-sm-6 col-xs-12"> <h5>disponibility</h5> <div class="stocnumber"> stoc:<span>100</span> </div> <div class="multipleoptions"> <div class="showinfo"> <div class="color cyan"></div> <div class="color azure"></div> <div class="color skyblue"></div> <i class="fa fa-plus"></i> </div> <div class="showplusinfo"> <h6>colors</h6> <div class="color cyan"></div> <div class="color azure"></div> <div class="color skyblue"></div> <div class="color phthaloblue"></div> <div class="color sapphire"></div> <div class="color gold"></div> <div class="color chartreuse"></div> <div class="color jasmine"></div> <div class="color apricot"></div> <div class="color gold"></div> <div class="color chartreuse"></div> <div class="color azure"></div> <div class="color skyblue"></div> <div class="color phthaloblue"></div> <div class="color jasmine"></div> <div class="color apricot"></div> <div class="color phthaloblue"></div> <div class="color sapphire"></div> <div class="color gold"></div> <div class="color chartreuse"></div> <div class="color jasmine"></div> <div class="color apricot"></div> <div class="color gold"></div> <div class="color chartreuse"></div> <div class="color jasmine"></div> <div class="color apricot"></div> </div> </div> <div class="multipleoptions"> <div class="showinfo">shipping<i class="fa fa-plus"></i> </div> <div class="showplusinfo"> <h6>shipping</h6> <p>sed ut perspiciatis unde omnis</p> <p>sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> </div> </div> </div> <div class="moreinfo col-lg-3 col-md-3 col-sm-6 col-xs-12"> <h5>short info</h5> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <div class="listinfoitem"> <ul> <li><strong>gama:</strong> powerseeker<br></li> <li><strong>design optic:</strong> refractor<br></li> <li><strong>nivel:</strong> incepatori/copii<br></li> <li><strong>tip obiectiv:</strong> acromat<br></li> <li><strong>computerizat:</strong> nu<br></li> </ul> <ul> <li><strong>magnitudine stelara maxima:</strong> 11.1<br></li> <li><strong>marire teoretica maxima:</strong> 120x<br></li> <li><strong>diametru (inch):</strong> 50 mm<br></li> <li><strong>montura:</strong> altazimutala<br></li> <li><strong>distanta focala:</strong> 600 mm<br></li> </ul> </div> </div> </div> </div> and show div:
$(".close-quick-look").on("click", function () { $(".quickmodalcover").css('display', 'none'); $(".fixedmodalquicklook").css('display', 'none'); }); $(".buttonquicklook").on("click", function () { $(".quickmodalcover").css('display', 'block'); $(".fixedmodalquicklook").css('display', 'block'); $(".fixedmodalquicklook").css('opacity', '1'); }); i don't know how show specific div, example generate:
<div class="fixedmodalquicklook17"> <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a> <div class="innermodalquicklook17"></div> </div> <div class="fixedmodalquicklook30"> <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a> <div class="innermodalquicklook30"></div> </div> <div class="fixedmodalquicklook556"> <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a> <div class="innermodalquicklook556"></div> </div> and how can modifiy javascript detect click show, or how can make single div , fill php info. !
looking @ live site. think you.
what doing here:
- first reaching parent element of
button. hereliparent of.buttonquicklook. - now looking next element has class
fixedmodalquicklook. - finally
.addclass('display')hasdisplay:blockproperty. (add css)
okay done here, work. still 1 safe sided code line needed.
- before doing above thing close quick modals(which not necessary, need close prev open next). still closing them(just in case somehow)
.addclass('display')
demo : here have used a tag click listener. example.
here solution:
$('.buttonquicklook').click(function(e){ $('.fixedmodalquicklook').removeclass("display"); // removing previous 1 if somehow still open. $(this).closest('li').next('.fixedmodalquicklook').toggleclass("display"); }); add css:
.display { display:block; } 
Comments
Post a Comment