1

I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.

But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.

But for the second tr apply button, popup window doesn't gets opened.

I am not sure why it is not working.

Below is my full code.

<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>

This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?

4

1 回答 1

2

您的 html 无效：该id属性应该是唯一的。当您使用选择器#JN_apply"时，它只选择一个按钮（在大多数浏览器中，这将是第一个，如您所见）。

您应该将每个更改为使用 aclass而不是 a id：

<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">

...然后更改 jQuery 选择器以匹配：

$('.JN_apply').click( function() { open($(this).data('url')); })

更新演示：http: //jsfiddle.net/p3wgm/3/

另请注意，创建调用的全局函数并不是一个好主意open()，close()因为已经有内置函数open()，close()并且您的函数将覆盖这些函数。也许openPopup()和closePopup()或类似？或者在您的文档就绪处理程序中定义它们，以便它们不是全局的，无论名称如何，这可能会更好。或者，如果它们只从一个地方（如您的示例中）调用，只需将该代码直接放在点击处理程序中。

于 2013-07-28T01:36:15.290 回答