css - Using divs in a looping list -
so i'm working on project display list in mvc 4 listview. 1 of fields has large amount of data instead of displaying info in table, made css modal window display. here's snippet of html listview , clickable modal view:
<table class="srrtable"> <tr> <th> dwelling id </th> <th> postal address id </th> <th> insuance policy id <th> xml text </th> </tr> @foreach (var item in model) { <tr> <td> @html.displayfor(modelitem => item.dwellingidentifier) </td> <td> @html.displayfor(modelitem => item.postaladdressidentifier) </td> <td> @html.displayfor(modelitem => item.insurancepolicyidentifier) </td> <td> <a class="xmllabel" href="#xmlmodal">view</a> <div id="xmlmodal"> <div class="xmlmodal"> <a class="close" href="#">close</a> <h2>xmltext</h2> <p>@html.displayfor(modelitem => item.xmltext)</p> </div> </div> </td> </tr> } </table> i used this take on this tutorial make modal window.
however when click on link display xmltext, shows first xmltext of row when should different. if displaying without div xmltexts correct element column. guess don't understand why doesn't work (because it's hidden div? because of link?) , looking explanation , maybe guidance on how xmltext display properly.
as css, followed tutorial please refer links. appreciate help, thanks!
re-update:
after implementing suggestions below field in table looks this:
. . . <div class="hidden">@(counter++)</div> <td> <a class="xmllabel" href="#xmlmodal@(counter)">view</a> <div id="xmlmodal@(counter)" class="showhidexmlmodal"> <div class="showhidexmlmodal@(counter)"> <a class="close" href="#">close</a> <h2>xmltext</h2> <p>@html.displayfor(modelitem => item.xmltext)</p> </div> </div> </td> . . . i added .showhidexmlmodal suggested , updated css:
a.xmllabel { display: block; margin: 20px auto; width: 50px; height: 50px; background: #232323; color: #fff; text-align: center; font: 14px/50px helvetica, verdana, sans-serif; text-decoration: none; } a.xmllabel:hover { background: #444; cursor: pointer; } input#xmltoggle { position: absolute; top: -9999px; left: -9999px; } #xmlmodal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: rgba(0,0,0,0.7); opacity: 0; -webkit-transition: opacity 1s ease, z-index 1s ease; -moz-transition: opacity 1s ease, z-index 1s ease; -ms-transition: opacity 1s ease, z-index 1s ease; -o-transition: opacity 1s ease, z-index 1s ease; transition: opacity 1s ease, z-index 1s ease; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)"; filter: alpha(opacity=0); } .showhidexmlmodal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: auto; padding: 20px; width: 500px; height: 200px; border-radius: 10px; background: rgba(255,255,255,0.7 ); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1); box-shadow: 3px 3px 3px rgba(0,0,0,0.1); opacity: 0; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 1s ease, z-index 1s ease; -moz-transition: opacity 1s ease, z-index 1s ease; -ms-transition: opacity 1s ease, z-index 1s ease; -o-transition: opacity 1s ease, z-index 1s ease; transition: opacity 1s ease, z-index 1s ease; } .showhidexmlmodal a.close { position: absolute; display: block; top: 7px; right: 7px; background: #232323; color: #fff; text-align: center; font: 14px/1.5 helvetica, verdana, sans-serif; text-decoration: none; padding: 0 5px; } .showhidexmlmodal h2 { color: #232323; text-transform: uppercase; font: 35px/1.5 helvetica, verdana, sans-serif; } .showhidexmlmodal p { color: #444; text-align: left; font: 13px/1.8 georgia, times, sans-serif; } .showhidexmlmodal:target, .showhidexmlmodal:target > .xmlmodal { opacity: 1; z-index: 2; } @media , (max-width: 767px) { .xmlmodal { width: 300px; height: 250px; } .xmlmodal h2 { font: 30px/1.5 helvetica, verdana, sans-serif; text-transform: uppercase; } .xmlmodal p { font: 12px/1.8 georgia, times, sans-serif; } } this code showing correct xml text now, black cover #xmlmodal isn't showing. suggestions?
its ignoring css goes xmlmodal id.
(disclamer new viewers: i'm extremely new web programming , concept of divs)
you can use counter make ids divs unique.
i don't have visual studio handy, think goes this:
@{var counter = 0;} @foreach (var item in model) . . . @{counter++;} <a class="xmllabel" href="#xmlmodal@(counter)">view</a> <div id="xmlmodal@(counter)" class="showhidexmlmodal"> hope helps!
edit: per comments below, added class div id, can pinpoint css. simple replace #xmlmodal .showhidexmlmodal. (you can use class name want of course, log isn't existing class in css.)
note: in css file, not in hrefs in example above!
Comments
Post a Comment