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

• 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

1 Answer 1

refer to this issue

or：

Bootstrap 3

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

Bootstrap 4

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