1

親ウィンドウからポップアップ ウィンドウを開こうとしています。2 つtrあり、それぞれtrに適用ボタンがあり、適用ボタンをクリックするとすぐにポップアップ ウィンドウが開きます。

しかし、どういうわけか、最初のtrの適用ボタンをクリックするとすぐに、最初のtrの適用ボタンの意味だけでポップアップウィンドウが開き、ポップアップウィンドウが開きます。

しかし、2 番目の 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です。その中で、最初の [適用] ボタンをクリックするとポップアップが開きますが、2 番目の [適用] ボタンをクリックするとポップアップは開きません。なぜこれが起こっているのか誰にも説明できますか？そして、これを解決する方法は？

4

1 に答える 1

2

あなたの HTML は無効です:id属性は一意である必要があります。セレクターを使用する#JN_apply"と、ボタンの 1 つだけが選択されます (ご覧のとおり、ほとんどのブラウザーでは、これが最初になります)。

classの代わりに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()また、 andというグローバル関数を作成することはお勧めできません。close()組み込み関数が既に存在open()しclose()、関数によってこれらが上書きされるためです。おそらくopenPopup()およびclosePopup()または同様の？または、ドキュメント対応ハンドラー内でそれらを定義して、グローバルにならないようにします。名前に関係なく、おそらくより良いでしょう。または、(あなたの例のように) 1 つの場所からしか呼び出されない場合は、そのコードをクリック ハンドラーに直接配置します。

于 2013-07-28T01:36:15.290 に答える