zclip在bootstrap模式下不起作用

I'm using the clean example code provided by zclip page:

我正在使用zclip页面提供的干净示例代码:

$('a#copy-dynamic').zclip({
    path:'js/ZeroClipboard.swf',
    copy:function(){return $('input#dynamic').val();}
});

and this is the HTML:

这是HTML:

<a href="#" id="copy-dynamic" class="">Click here to copy the value of this input:</a>
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">

It works fine if the HTML is inside the bootstrap main page, but it stops working if i move the html inside a bootstrap modal window (that is, inside the div element of the modal).

如果HTML在引导程序主页面内,它可以正常工作,但如果我在引导程序模式窗口内移动html(即在模态的div元素内),它就会停止工作。

How can i get it work?

我怎样才能让它发挥作用?

2 个解决方案

#1

I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:

我对zclip和bootstrap模态有同样的问题。我应用的修复是双重的:

Attach the zclip to the element inside the modal's 'show' function.

将zclip附加到模态'show'函数内的元素。

Add a 250ms delay before attaching the zclip to the element

在将zclip附加到元素之前添加250毫秒的延迟

This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.

这样可以将zclip正确放置在模态中。如果模态中有多个选项卡,它也可以工作。

HTML

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

JavaScript

$('#myModal').on('show', function () {
    $("#modal_body_button").delay(250).queue(function(next){
        $(this).zclip({
            path: "/static/javascript/ZeroClipboard.swf",
            copy: "copied text OK!"
        });
        next();
    });
});

#2

In example above can also use on('shown') instead of on('show') event which calls when modal completely showed. This helps to prevent using dirty hacks like delay(250)

在上面的例子中也可以使用on('shown')而不是on('show')事件,当模态完全显示时调用。这有助于防止使用像延迟这样的脏黑客(250)

#1