5

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?

Crazy
  • 757
  • 11
  • 30
  • This may help you - https://codepen.io/anon/pen/NbxWbQ – Phani Kumar M Sep 08 '17 at 01:55
  • @PhaniKumarM Thanks, but i don't want to copy from an input text field. – Crazy Sep 08 '17 at 01:57
  • Possible duplicate of [Working "Copy to Clipboard" function doesn't work when called in bootstrap modal](https://stackoverflow.com/questions/48122221/working-copy-to-clipboard-function-doesnt-work-when-called-in-bootstrap-modal) – Nisarg Jan 14 '18 at 05:52

1 Answers1

3

refer to this issue

or：

Bootstrap 3

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

Bootstrap 4

$.fn.modal.Constructor.prototype._enforceFocus = function() {};
hanzichi
  • 479
  • 1
  • 8
  • 21