gpt4 book ai didi

javascript - zclip 在 bootstrap 模态中不工作

转载 作者:行者123 更新时间:2023-11-29 09:54:41 25 4
gpt4 key购买 nike

我正在使用 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 位于 bootstrap 主页面内,它工作正常,但如果我将 html 移动到 bootstrap 模态窗口内(即模态的 div 元素内),它将停止工作。

我怎样才能让它工作?

最佳答案

我在使用 zclip 和 bootstrap 模态时遇到了同样的问题。我应用的修复是双重的:

  • 将 zclip 附加到模态“显示”函数内的元素。
  • 在将 zclip 附加到元素之前添加 250 毫秒的延迟

这会将 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();
});
});

关于javascript - zclip 在 bootstrap 模态中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14281373/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com