jModal(모달리스)

 

jQuery 플러그인( jqModal.js )

<script type='text/javascript' src='/js/jquery.js'></script>
<script src="/js/jqModal.js" type="text/javascript"></script>

 

<style type="text/css">
/****
/* jqmodal css
****/
.jqmWindow {
    display: none;
    position: fixed;
    top: 10px;
    left: 5%;
    margin-left: 0px;
    width: 90%;
    background-color: #FFF;
    color: #333;
    border: 1px solid black;
    padding: 12px;
    height:90%;
    overflow:auto;
}
.jqmOverlay { background-color: #000; }
/* for IE6.0 */
/*
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(1 * (document.documentElement.offsetHeight || document.body.clientHeight) / 10) + 'px');
*/
.jqmWindow {
     position: absolute;
     top: 10px;

}
</style>

 

<a href="link" class="jqModal" title='modals'>link</a>

 

 

<script type='text/javascript' language='javascript'>//<![CDATA[
jQuery(document).ready(function(){
    //jQuery('#dialog').jqm({ajax: '@href', trigger: 'a.jqModal'});
    jQuery('#dialog').jqm({ajax:'@href'});
    jQuery('.jqModal').click(function(){
      var abc = jQuery(window).scrollTop()+50;
      if(jQuery(this).attr('title')=='modals'){
        var abc = jQuery(window).scrollTop()+10;
        //jQuery("jqmWindow").css("top",abc);
        jQuery('#dialog').jqmShow().css("top",abc);
        jQuery('#dialog').jqmShow().css("height","90%").css("top",abc);
      }
    });
});
//]]></script>

이 글은 스프링노트에서 작성되었습니다.