Question

我有一个用户点击链接时出现的弹出窗口。这将打开一个弹出窗口，该弹出窗口是与用户正在查看的页面不同的URL。

我想弄清楚当用户点击弹出窗口中名为“点击应用”的链接到原始页面上的输入框时，如何应用某些代码。

这是我的代码。

原始页面

<form id="discount-coupon-form" action="<?php echo $this->getUrl('checkout/cart/couponPost') ?>" method="post">
    <div class="discount">
        <h2><?php echo $this->__('Discount Codes') ?></h2>
        <div class="discount-form">
            <label for="coupon_code"><?php echo $this->__('Enter your coupon code if you have one.') ?></label>
            <input type="hidden" name="remove" id="remove-coupone" value="0" />
            <div class="input-box">
                <input class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $this->htmlEscape($this->getCouponCode()) ?>" />
            </div>
            <div class="buttons-set">
                <button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="discountForm.submit(false)" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>

                <button type="button" title="<?php echo $this->__('Get Coupon') ?>" class="button" onclick="return popitup('http://127.0.0.1:8888/giftreg/activecoupons')" value="<?php echo $this->__('Get Coupon') ?>"><span><span><?php echo $this->__('Get Coupon') ?></span></span></button>


                <?php if(strlen($this->getCouponCode())): ?>
                    &nbsp; <button type="button" title="<?php echo $this->__('Cancel Coupon') ?>" class="button" onclick="discountForm.submit(true)" value="<?php echo $this->__('Cancel Coupon') ?>"><span><span><?php echo $this->__('Cancel Coupon') ?></span></span></button>
                <?php endif;?>
            </div>
        </div>
    </div>
</form>

<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
    newwindow=window.open(url,'name','height=500,width=1000');
    if (window.focus) {newwindow.focus()}
    return false;
}

// -->
</script>

POPUP页面

<a href="" value="SomeCodeToApply" class="bottom"><strong>Click To Apply</strong></a>

点击上面的链接后，我希望将该值应用于原始页面上的以下输入字段。

<input class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $this->htmlEscape($this->getCouponCode()) ?>" />

最后，当用户点击链接以应用它时，它应该关闭弹出窗口。

非常感谢任何帮助

Answer 1

window.opener指向窗口实例打开一个弹出窗口（使用window.open）。

因此，当用户点击弹出窗口中的“应用”链接/按钮时，您可以使用它来访问开始页面中的表单元素，设置值，然后关闭弹出窗口。

Answer 2

Soo，没有使用弹出窗口......

你需要一个像“查看优惠券”之类的按钮......

soo，你点击按钮

<a id="view" href="#">View Copuns</a> //your buttonn
<div id="myCoupons" style="display:none;"> //your div coupons
    <p>COUPON12334</p>
    <a href="#" class="btn_coupon" id="<? echo $id_coupon_or_coupon_text_etc?>">buton</a>
    <p>COUPON123214</p>
    <a href="#" class="btn_coupon" id="<? echo $id_coupon_or_coupon_text_etc?>">buton</a>
    <p>COUPON5343</p>
    <a href="#" class="btn_coupon" id="<? echo $id_coupon_or_coupon_text_etc?>">buton</a>
</div>
//Tour input with the value coupon
<input type="hidden" id="coupon" name="coupon"/>
//your script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript>
$('#view').click(function(){ //When you click view, show the div
   $('#myCoupons').show(); //Show the div of coupons.
});

$('.btn_coupon').click(function(){ //When you click on a btn_coupon, close the div and put the val of your coupon in input hidden
  var value = $(this).attr("id"));
  alert("You click in the coupon "+value;
  //you can put this val in a input hidden
  $('#coupon').val(value);
  $('#myCoupons').hide(); //CLOSE THE DIV OF COUPONS
});
</script>

当你点击提交表单时，你可以收到你的php文件，如$ _POST ['coupon']或$ _GET。

Answer 3

我的建议是尽量避免弹出窗口，如果大多数人都使用广告块，就会阻止重要信息的显示。

而是使用Jquery Dialog或类似的解决方案。你需要Jquery UI，我没有包含CSS所以它看起来很糟糕。看看小提琴：http://jsfiddle.net/8jK7f/

<div id="dialog-confirm" title="Confirm Purchase">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Your coupon code is:<span id="my_code"> </span></p>
</div>
<a href="#" id="coupon_code" value="488452345" class="bottom"><strong>Click To Open Popup</strong></a>
<a href="#" class="closePopup"><strong>Close Popup from page</strong></a>

的Javascript

 $('.bottom').click(function(){ 
      var value = $('#coupon_code').attr('value'); 
       //append code
      $('#my_code').html(value);
       //open-popup
        $( "#dialog-confirm" ).dialog( "open" );

    });


        $( "#dialog-confirm" ).dialog({
          resizable: false,
          autoOpen:false,
          height:140,
          modal: true,
          buttons: {
            "Option_1": function() {
              $( this ).dialog( "close" );
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
        });

      $( ".closePopup" ).click(function() {
          $( "#dialog-confirm" ).dialog( "close" );
        });

单击时将代码应用于输入框

3 个答案:

的Javascript