Question

我有一个Twitter Bootstrap模式，我正在显示我想要包含“复制到剪贴板”按钮。我正在尝试使用ZeroClipboard组件https://github.com/jonrohan/ZeroClipboard

以下是我的示例代码。按钮“Copy1”直接在页面上，并且有效。按钮“Copy2”在模态上，但不起作用。当按下“Copy2”时，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.但在两次代码尝试中，Google Chrome都可以。

Answer 1

您的第二个副本按钮的目标是不存在的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" />

Answer 2

当我们将“ZeroClipboard”与“Bootstrap模式”一起使用时，它会在“IE”中产生冲突。

我们需要在bootstrap的“js”文件中进行更改。

在“Bootstrap.js”中为“Modal.prototype.enforceFocus”元素定义了方法。

这里，在“If”条件下，我们需要添加以下条件，

!$(e.target).closest('[id ^= "ZeroClipboardMovie_"]').length)

结果代码如下所示，

if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('[id ^= "ZeroClipboardMovie_"]').length) {
         this.$element.focus()
 }

其中，[id ^ =“ZeroClipboardMovie_”]是ZeroClipboard容器元素。

在上面的代码中，它是最近的“ZeroClipboard”的容器。您可以根据要求将其更改为适当的“zeroclipboard-container”。

您还可以查看此博客文章了解更多详情 - http://wisdmlabs.com/blog/ie-issue-zeroclipboard-bootstrap-modal/

在Bootstrap模式上使用ZeroClipboard

2 个答案: