zclip在引导模态中不起作用 [英] zclip not working within bootstrap modal
本文介绍了zclip在引导模态中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用zclip页面提供的干净的示例代码:
I'm using the clean example code provided by zclip page:
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
这是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.'}">
如果HTML位于引导程序主页中,则效果很好,但是如果我将HTML移至引导程序模式窗口内(即,模式的div元素内),它将停止工作.
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).
我如何使它工作?
推荐答案
我在zclip和bootstrap模态上也遇到了同样的问题.我应用的修复方法有两个:
I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:
- 将zclip附加到模式的显示"功能内的元素上.
- 在将zclip附加到元素之前添加250ms的延迟
这可以将zclip正确地放置在模态中.如果您在模式中有多个标签,它也可以使用.
This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.
HTML
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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();
});
});
这篇关于zclip在引导模态中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文