ふたりで

동적 클릭 적용 및 클릭한 요소 내용을 dailog 창에 표시 하기 본문

javascript

동적 클릭 적용 및 클릭한 요소 내용을 dailog 창에 표시 하기

graykang 2021. 6. 28. 15:51
728x90
반응형
SMALL

특정 html에 click 이벤트를 걸고 해당 요소를 클릭 하면 소요내의

content를 dailog 창에 표시 한다. tr을 동적으로 추가 하는 부분은 생략...

참고: 아래 소스의 경우 html로딩이 완료 되고난후 특정 구역에 html을

add하는 경우에도 새로add한 html소요에도 클릭 이벤트가 적용 된다.

 

$(document).ready(function(){

});
//ready 밖에 function 영역에 작성 해야함.
var test = $('body');
test.on("click",".js_sordMemo",function (e) {
	$('.popupLayer').hide();
	//console.log($(this).children('input').val());
	
	var sWidth = window.innerWidth;
	var sHeight = window.innerHeight;

	var oWidth = $('.popupLayer').width();
	var oHeight = $('.popupLayer').height();

	// dailog위치 셋팅.
	var divLeft = e.clientX + 10;
	var divTop = e.clientY + 5;

	// dailog가 화면 크기를 벗어날 경우 재배치
	if( divLeft + oWidth > sWidth ) divLeft -= oWidth;
	if( divTop + oHeight > sHeight ) divTop -= oHeight;

	// dailog위치변경시 기준점이(0,0) 밖으로 벗어날경우기준점(0,0)에 재배치.
	if( divLeft < 0 ) divLeft = 0;
	if( divTop < 0 ) divTop = 0;
	
	$('#popupLayer').text($(this).children('input').val());
	var strlen = $(this).children('input').val().trim();
	if(strlen.length > 0){
		$('.popupLayer').css({
			"top": divTop,
			"left": divLeft,
			"position": "absolute"
		}).show();
	}

});
<style>
.imgSelect {
	cursor: pointer;
}

.popupLayer {
	position: absolute;
	display: none;
	background-color: #ffffff;
	border: solid 2px #d0d0d0;
	width: auto;
	height: auto;
	padding: 10px;
}
.popupLayer div {
	position: absolute;
	top: 5px;
	right: 5px
}

</style>
.
.
.
<body>
<div>
<table>
<tr>
	<td></td>
	<td></td>
	<td></td>
</tr>
<!-- 동적으로 추가되는 tr (동적으로 추가시 class="js_sordMemo"로)-->
<tr>
	<td></td>
	<td></td>
	<td class="js_sordMemo"><input type="hidden" value="1234567" /></td>
</tr>
<!-- 동적으로 추가되는 tr -->
<tr>
	<td></td>
	<td></td>
	<td></td>
</tr>
</table>
</div>
<!-- dailog UI껍데기 tr -->
<div class="popupLayer">
	<div>
		<span onClick="closeLayer(this)" style="cursor:pointer;font-size:1.5em" title="닫기"></span>
	</div>
	<p id="popupLayer"></p>
</div>
<!-- dailog UI껍데기 tr -->
</body>
728x90
반응형
LIST
저작자표시

'javascript' 카테고리의 다른 글

vue.js To pwa (vue.js 프로젝트를 PWA 로...)  (0) 2021.08.24
multi iframe pageing print (동적 iframe 을 사용한 페이징처리 및 인쇄)  (0) 2021.07.05
javascript 전화번호 휴효성 검사  (0) 2021.03.30
PopUp화면 POST방식으로 처리...  (0) 2021.03.25
checkbox checked value control  (0) 2021.01.26
'javascript' Related Articles more
Comments