我有一个 Twitter Bootstrap 模态，我正在显示我想在其中包含“复制到剪贴板”按钮的位置。我正在尝试使用 ZeroClipboard 组件 https://github.com/jonrohan/ZeroClipboard
下面是我的示例代码。按钮“Copy1”直接在页面上并且有效。按钮“Copy2”在模态上，但不起作用。当按下“复制 2”时，Internet Explorer 似乎“锁定”。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.min.css" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/ZeroClipboard.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="span6">
<!-- Textbox and copy button pair #1 (not on modal) -->
<input type="text" id="Input1" />
<button class="btn" type="button" id="Copy1" data-clipboard-target="Input1">Copy Input #1</button>
</div>
<div class="span6">
<a class="btn" type="button" href="#Modal1" data-toggle="modal">Show Modal Dialog</a>
</div>
</div>
<div class="modal hide fade" role="dialog" id="Modal1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Copy to Clipboard Modal</h3>
</div>
<div class="modal-body">
<p>
<!-- Textbox and copy button pair #2 (on modal) -->
<input type="text" id="Input2" />
<button class="btn" type="button" id="Copy2" data-clipboard-target="Input2">Copy Input #2</button>
</p>
</div>
<div class="modal-footer">
<p>
<button class="btn" type="button" data-dismiss="modal">Close</button>
</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
ZeroClipboard.setDefaults({
moviePath: '/Scripts/ZeroClipboard.swf'
});
var clip1 = new ZeroClipboard($("#Copy1"));
var clip2 = new ZeroClipboard($("#Copy2"));
});
</script>
</body>
</html>
任何人都可以就出现的问题提供一些指导吗？我知道 Bootstrap 会在显示之前将模式从 DOM 树中取出，但我不确定如何适应它。
编辑:将第二个输入的 ID 更正为“Input2”以匹配按钮的目标。
此外，我还尝试了以下 javascript:
//var clip2 = new ZeroClipboard($("#Copy2"));
$("#Modal1").on('shown', function () {
var clip2 = new ZeroClipboard($("#Copy2"));
});
此外，该问题似乎是特定于浏览器的。
原始代码和我修改后的代码会锁定 Internet Explorer 10。但谷歌浏览器在两种代码尝试下均正常。
最佳答案
您的第二个复制按钮指向一个不存在的 ID:
<button class="btn" type="button" id="Copy2" data-clipboard-target="Input2">Copy Input #2</button>
您的标记不正确:
<input type="text" id="Text2" />
应该是:
<input type="text" id="Input2" />
关于html - 在 Bootstrap Modal 上使用 ZeroClipboard，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16700298/