It works fine when outside the modal dialog, but when trying copy text to clipboard in bootstrap modal dialog then it does not work.

<button class="btn btn-primary-outline" data-toggle="modal" data-target="#dia">Open</button>
<button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="not in modal"><i class="fa fa-clipboard"></i></button>

<div id="test" class="modal fade" id="dia" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">Test</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="in modal">
                        <i class="fa fa-clipboard"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script> 
var clipboard = new Clipboard('.copy',{
            container: document.getElementById('test'),
        });
</script>

This is the sample code for the clipboard function in modal and not in modal. Is there any solution to fix the issue when trying to copy text to clipboard in modal dialog?

It works fine when outside the modal dialog, but when trying copy text to clipboard in bootstrap modal dialog then it does not work.

<button class="btn btn-primary-outline" data-toggle="modal" data-target="#dia">Open</button>
<button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="not in modal"><i class="fa fa-clipboard"></i></button>

<div id="test" class="modal fade" id="dia" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">Test</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="in modal">
                        <i class="fa fa-clipboard"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script> 
var clipboard = new Clipboard('.copy',{
            container: document.getElementById('test'),
        });
</script>

This is the sample code for the clipboard function in modal and not in modal. Is there any solution to fix the issue when trying to copy text to clipboard in modal dialog?

• javascript
• twitter-bootstrap
• clipboard

Share Improve this question Follow asked Sep 8, 2017 at 1:24 CrazyCrazy 86722 gold badges1919 silver badges4545 bronze badges 3

• This may help you - codepen.io/anon/pen/NbxWbQ – Phani Kumar M Commented Sep 8, 2017 at 1:55
• @PhaniKumarM Thanks, but i don't want to copy from an input text field. – Crazy Commented Sep 8, 2017 at 1:57
• Possible duplicate of Working "Copy to Clipboard" function doesn't work when called in bootstrap modal – Nisarg Shah Commented Jan 14, 2018 at 5:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

refer to this issue

or：

Bootstrap 3

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4

$.fn.modal.Constructor.prototype._enforceFocus = function() {};