简体   繁体   中英

Is there a better way to show and hide?

Ok so I want to display a Div from inside the page which is hidden, when clicked it fits 1005 width of the page and 100% height with scrolling content, I'm having a few issues with background stuff coming through even after extensive z-index checking and setting, as well as this on scrolling down, once you get to the bottom of the div it seems to scroll down and display the content beneath it which I dont really want it to do. ANyway I'd like to know if there is something a bit more solic, structured or just more efficient than using what i already have. Heres the coding any advice would be much appreciated.

    <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>


<div id="ef" style="display:none; width:100%; height:120%; overflow:scroll; background-color:#f1f1f1; -webkit-overflow-scrolling:touch; z-index:2000; padding-top:43px; "><div id="efmenubars">
            <div style="width:50px; height:40px;margin-top:7px; float:left; margin-left:8px;">
            </div><span style="display:inline-block;  text-align:center; font-family:'helvetica_bqregular'; font-size:20px; color:#333;">Post Enquiry</span>

    <a href="#" onclick="toggle_visibility('ef');"> <img src="../images/close.png" width="50px" style="float:right; margin-top:7px; margin-right:8px;" /></a>

        </div>
<p>{leftcol}</p></div>

<a class="button2" style="float:right; margin-right:12px; margin-top:19px;"  onclick="toggle_visibility('ef');">Post Enquiry</a>

Hope it all makes sense, sorry for the inline css very confusing I know it was a quick job need to clean it up.

Cheers

Ol

Just use jquery to toggle between visiblity states. jQuery is mostly for simplifying and enhancing your code. So, if you really want to improve your code, use jquery.

.$('#idOfYorElement').toggle();

Just a simple one liner :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM