1
부모 창에서 팝업 창을 열려고합니다. 두 개의 tr이 있고 각 tr에는 적용 버튼이 있습니다. 적용 버튼을 클릭하자마자 팝업 창이 열립니다.동적으로 각각의 팝업 창을 여는 방법
하지만 어떻게 든 첫 번째 tr에 대해 팝업 창이 열리면 첫 번째 tr에 대해 적용 버튼을 클릭하자마자 버튼 의미 만 적용됩니다. 팝업 창이 열립니다.
두 번째 적용 버튼의 경우 팝업 창이 열리지 않습니다.
왜 작동하지 않는 것인지 잘 모르겠습니다.
다음은 전체 코드입니다.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click(function() { close() })
$('#JN_apply').click(function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
<a href="some_url"> Field Specialist Program </a>
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
<a href="some_url"> Field Specialist Material </a>
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
이것은 내가 작성한 jsfiddle입니다. 첫 번째 적용 버튼을 클릭하면 팝업이 열리고 두 번째 적용 버튼을 클릭하자마자 팝업이 열리지 않는다는 것을 알 수 있습니다. 아무도 왜 이런 일이 일어 났는지 설명 할 수 있습니까? 어떻게 해결할 수 있을까요?
open() 및 close() 함수가 이미 있습니다. 다른 이름을 선택하십시오. –
의미? 나는 이해하지 못했다 .. –