Question

我有

<a class="zipbutton" onclick="window.open('www.site.com/zipfinder/','popupwindow'...>。

我的主页上有2个输入字段。 从邮政编码和到邮政编码。在它们旁边是用于打开页面的锚点按钮，用户可以根据城市和州找到邮政编码，然后将邮政编码发布到相应的文本字段。我做的是，我为每个锚点按钮创建了2个单独的页面。有没有办法将它们组合成一个弹出窗口？

以下是其中一个弹出式页面的示例代码：

<script language="Javascript" type="text/javascript"> 
    function post_value(){
        window.opener.document.getElementById("FromZip").value = document.getElementById("cityBox").value;
        self.close();
        }
</script>

和

    function post_value(){
            window.opener.document.getElementById("ToZip").value = document.getElementById("cityBox").value;
            self.close();
        }

Answer 1

您可以随时使用 -
1）Internet Explorer中的event.srcElement
2）大多数其他浏览器中的event.target。

这将为你的case中的click元素提供click元素的src元素。对元素id进行过滤，只使用一个弹出窗口。

点击here了解详情。

示例代码： -

 <script language="Javascript" type="text/javascript"> 
function post_value(event){
if(event.target!=null)
{
  var target=event.target.id;//This is the id of the element which triggered the event.
}
    window.opener.document.getElementById("FromZip").value = document.getElementById("cityBox").value;
    self.close();
}

Answer 2

这是执行此操作的一些示例。我使用JQuery来做这件事。

Html表单

<form>
<input type="text" id="FromZip" name="FromZip">
<a href="#" class="button_open_Fromzipcode">Zip code</a>
<br>
<input type="text" id="ToZip" name="FromZip">
<a href="#" class="button_open_Tozipcode">Zip code</a>

</form>

<div id="zipcodes">
<a href="#" class="button_close_zipcode">Close</a>
<br>

<!--LOAD YOUR ZIP CODES HERE-->

<!--For Example-->
<a href="#" class="zipcode">0001</a><br>
<a href="#" class="zipcode">0002</a><br>
<a href="#" class="zipcode">0003</a><br>
<a href="#" class="zipcode">0004</a><br>
<a href="#" class="zipcode">0005</a><br>
<a href="#" class="zipcode">0006</a><br>
<a href="#" class="zipcode">0007</a>

</div>

zipcodes容器的样式

<style type="text/css">
#zipcodes
{   
    display: none;
    color:#000;
    background-color: #eee;
    text-align: left;
    min-height: 100px;
    box-shadow: 0px 0px 7px #000;
    position: absolute;
    width:200px;
    height: 200px;
    top:40%;
    left:40%;
    padding: 16px;
    z-index:1000;

}
</style>

这是Jquery脚本。确保在head标记

中添加jquery库

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>



   <script type="text/javascript">
    $(document).ready(function(){

    var zipbox;

//Open zipcode container
    $(".button_open_Fromzipcode").click(function(e){
        e.preventDefault();
        $("#zipcodes").css("display","block");
        zipbox="FromZip";//flag the return textbox
    });

//Open zipcode container
    $(".button_open_Tozipcode").click(function(e){
        e.preventDefault();
        $("#zipcodes").css("display","block");
        zipbox="ToZip";//flag the return textbox
    });

  //Close zipcode container
    $(".button_close_zipcode").click(function(){
        $("#zipcodes").css("display","none");
    });



    $(".zipcode").click(function(){
        $("#"+zipbox).val($(this).text());//Set selected zipcode to Textbox
        $("#zipcodes").css("display","none");//Close zipcode container
    });

    });
    </script>

检查哪个锚点按钮打开了弹出页面

2 个答案: