How to show a div with java script

Question

I have a simple problem. I need to use php which will generate products on a page. When the user clicks on quick look, it should popup a window and show some product information. I can only do this two ways: first, generate a popup div for each product. Second, generate only one basic pop-up and fill in data from the product. Now I have the second version:

This is the 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 to cart</a></div> <h2 class="hidden-xs"><a href="#" title=""> Hiroshige: One Hundred Famous Views of Edo</a></h2> <div class="stars"><img src="images/icon/stars-small.png" alt=" " title="" /> </div> <div class="priceQuikLookItem">&#163;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 to 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 do 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 with this I 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 to show the specific div, for example I will 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 i can modifiy my javascript to detect what i click to show, or how can i make a single div and fill that with my php info. Thanks !

Post your CSS along, and better if you could create a demo with CSS. — divy3993
– divy3993, Commented Sep 25, 2015 at 17:55
OK, So when do you want popup? Is that when you click on Quick Look? — divy3993
– divy3993, Commented Sep 25, 2015 at 18:07
Yes, as you see i have the popup now, and is working but if you click on all products on quick look you will see same popup. And in source are bout 9 different popups — Malasuerte94
– Malasuerte94, Commented Sep 25, 2015 at 18:12
After having a look to your live - web, posted an Answer. See if it helps youa and if any queries feel free to ask. — divy3993
– divy3993, Commented Sep 25, 2015 at 19:43

divy3993 · Accepted Answer · 2015-09-25 19:50:58Z

Looking at your live site. I think this would help you.

What are we doing here:

First reaching the parent element of button. Here li is parent of .buttonQuickLook.
Now looking for the next element which has class fixedModalQuickLook.
Finally .addClass('display') which has display:block as property. (Add to your CSS)

Okay almost done here, now this would work. But still one safe sided code line needed.

Before doing the above thing we will close all Quick Look Modals(which is not necessary, as you need to close prev to open next). But still we will closing them(just in case somehow) by .addClass('display')

Demo : Here i have used a tag as click Listener. Just an example.

Here is the solution:

$('.buttonQuickLook').click(function(e){ $('.fixedModalQuickLook').removeClass("display"); // Removing all previous one if somehow still open. $(this).closest('li').next('.fixedModalQuickLook').toggleClass("display"); });

Add this to your CSS:

.display { display:block; }

MagJS · Accepted Answer · 2015-09-25 17:58:59Z

It's actually quite simply in jQuery you can easily use the toggle() function to literally change the visibility of any targeted element:

This makes show/hide really easy as the following show.

For example:

HTML

<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> </div> <button>Quick Look</button>

JS

$(".close-quick-look, button").on("click", function() { $(".quickModalCover").toggle(); $(".fixedModalQuickLook").toggle() })

Here is the full working example: http://jsbin.com/babupucoku/edit?html,js,output

Hope that helps!

Kisaragi · Accepted Answer · 2015-09-25 18:12:08Z

some psuedo code:

<? foreach($products as $product):?> <div id ="product_<?=$product->id;?>" onclick="display('product_<?=$product_id;?>'); return false;"> <div id="header"> Viewing information for <?=$product->name;?> </div> </div> <? endforeach;?>

jquery:

 function hide() { $('[id^=product_]').hide(); } $(document).ready(function() { hide(); }); //displays div passed in function display(div_id) { hide(); $('#'+div_id).fadeIn(); }

Collectives™ on Stack Overflow

How to show a div with java script

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related