[javascript]DIV 레이어 팝업창 사용하기 - jQuery 활용 -

 

function PopupDiv_show()
{
    jQuery( "body" ).append("<div id='BackFilm' style='display:none; z-index:9998;' onclick='PopupDiv_hidden()'></div>");
    jQuery( "body" ).append("<div id='divPop' style='display:none; vertical-align: top; padding: 0px 0px 0px 0px; z-index:9999'></div>");
    //----------------------------------------------------------------------------
    jQuery("#BackFilm").css('display'		,	"block"							);
    jQuery("#BackFilm").css('position'		,	"absolute"						);
    jQuery("#BackFilm").css('background'	,	"#cccccc"						);
    jQuery("#BackFilm").css('opacity'		,	0.7								);
    jQuery("#BackFilm").css('top'			,	'0'								);
    jQuery("#BackFilm").css('left'			,	'0'								);
    jQuery("#BackFilm").css('width'			,	jQuery(document).width()		);
    jQuery("#BackFilm").css('height'		,	jQuery(document).height()		);

    //	jQuery("#BackFilm").css('display'		,	"block"							);
    //----------------------------------------------------------------------------
    jQuery("#divPop").css('display'			,	"block"							);
    jQuery("#divPop").css('position'		,	"absolute"						);
    jQuery("#divPop").css('background'		,	"#ffffff"						);
    jQuery("#divPop").css('opacity'			,	1.0								);

    //	레이어 팝업 드레그 지원 여부
    //	jQuery( "#divPop" ).draggable();

    //----------------------------------------------------------------------------

}//	end function

function PopupDiv_hidden()
{
    jQuery("#BackFilm").remove();
    jQuery("#divPop").remove();
    //	jQuery( "body" ).append("<div id='divPop' style='display:none; padding: 0px 0px 0px 0px; z-index:9999'></div>");


    jQuery("#BackFilm").html('');
    jQuery("#BackFilm").css('display', "none");

}//	end function