Question

我有一个模态框，如下所示：

<div class="modal-coupon-code">
        <center class="show-code"><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#couponcode<?php echo $result->id; ?>">Show Coupon Code</button></center>

         <div class="modal fade" id="couponcode<?php echo $result->id; ?>" role="dialog">
            <div class="modal-dialog">
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
                  <h4 class="modal-title"><img src="http://www.image.png" class="img-responsive" width="350"></h4>
                </div>
                <div class="modal-body">

                  <div class="popup-code-block">
                  <span class="code-txt" data-type="html" data-model="couponCode"><?php echo $result->coupon_code; ?></span>
                  <span class="copy-btn" data-type="attribute" data-attr-name="data-clipboard-text" data-model="couponCode" data-clipboard-text="<?php echo $result->coupon_code; ?>">COPY CODE</span>
                  </div>

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>

            </div>
          </div>
        </div>

我用它来显示代码，当用户点击COPY CODE时，它被复制到剪贴板，背景颜色和文本分别变为绿色和COPIED。但是当我关闭模态时，我想重置它。我尝试的是如下：

$(document).ready(function(){
    $('.copy-btn').on("click", function(){
        value = $(this).data('clipboard-text');
        //console.log(value);
        var $temp = $("<input>");
          $("body").append($temp);
          $temp.val(value).select();
          document.execCommand("copy");
          $temp.remove();
          $('.copy-btn').css("background-color", "green").text("Copied!");
          $(modal).on("close", function(){ //I am getting problem here
            $(this).css('background-color', '').text('');
          })
    })
})

关闭模态有三种方法。第一个使用关闭符号，第二个使用关闭链接。第一个是通过单击模态框外部，也关闭框。如何在这三种情况下重置模态框文本和颜色。

Answer 1

要在模式关闭时收听，请使用此$( "#modal" ).on( "hide.bs.modal", function(e) { });

要重置背景颜色并删除优惠券代码，请使用：

$( "#modal" ).on( "hide.bs.modal", function(e) {

    $( ".code-txt" ).html( "" );

    $( ".copy-btn" ).css( "background-color", "" );
    $( ".copy-btn" ).text( "" );

});

您尚未在问题中定义modal变量，因此我使用了“#modal”

我想在关闭它后重置modala，但它不起作用

1 个答案: