javascript – zclip在bootstrap模式下不起作用
作者:互联网
我正在使用zclip页面提供的干净示例代码:
$('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元素内),它就会停止工作.
我怎样才能让它发挥作用?
解决方法:
我对zclip和bootstrap模态有同样的问题.我应用的修复是双重的:
>将zclip附加到模态’show’函数内的元素.
>在将zclip附加到元素之前添加250ms延迟
这样可以将zclip正确放置在模态中.如果模态中有多个选项卡,它也可以工作.
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,javascript,twitter-bootstrap,modal-dialog 来源: https://codeday.me/bug/20190901/1782658.html