Bootstrap modal does not work with Clipboard.js (on Firefox)
<p>I have a button on a bootstrap modal which is supposed to copy some data (shown in the modal) to clipboard (with clipboard.js).</p>

<p>Modal seems to not support this action.</p>

<p>When the button, which triggers the event described above, is out of the modal it works like a charm!
So, i decided to make the modal button trigger another hidden button outside of the modal so the action could be done. But it still does not work! 
Please help, code and example below.</p>

<p><a href="https://jsfiddle.net/w6rL9sqz/2/" rel="nofollow">https://jsfiddle.net/w6rL9sqz/2/</a></p>

<p>js</p>



<pre><code>&lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="js/clipboard.js"&gt;&lt;/script&gt;
&lt;script src="js/clipboard.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $( document ).ready(function() 
    {

        //tooltip
        $('.trigger-button').tooltip({
            trigger : 'click'
        });

        $('.trigger-button').click(function()
        {
            $('.trigger-button').tooltip('show');
            setTimeout(function()
            { 
                $('.trigger-button').tooltip('hide'); 
            }, 
            2000);  
            $('#copy-button').trigger('click');
        });

        // copy to clipboard
        var yii2_ids = 1234567890;
        $('#copy-button').click(function(){
            var clipboard = new Clipboard('#copy-button', {
                text: function() 
                {
                    return yii2_ids;
                }
            });
            clipboard.on('success', function(e) {
                console.log(e);
            });
        });
    });
&lt;/script&gt;
</code></pre>

<p>html </p>

<pre><code>&lt;div class="container-fluid margin-top"&gt;
&lt;div class="row"&gt;
    &lt;div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 search-div"&gt;
        &lt;div class="row"&gt;
            &lt;center&gt;
            &lt;div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"&gt;
                &lt;button id="copy-button" class="btn btn-primary" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard" style="display:none;"&gt;triggered-hidden&lt;/button&gt;
                &lt;button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard"&gt;Copy to Clipboard&lt;/button&gt;
                &lt;textarea&gt;&lt;/textarea&gt;
            &lt;/div&gt;
            &lt;/center&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;button class="btn btn-primary" data-target="#upload-ebook" data-toggle="modal" type="button"&gt;Modal&lt;/button&gt;
        &lt;div class="modal fade bs-example-modal-lg"  id="upload-ebook" tabindex="-1" role="dialog"&gt;
            &lt;div class="modal-dialog modal-lg"&gt;
                &lt;div class="modal-content"&gt;
                    &lt;div class="modal-body"&gt;
                        &lt;p style="text-align:left; background: black; color: white; padiing: 20px;"&gt;
                            &lt;samp&gt;&lt;b&gt;id = $id&lt;/b&gt;&lt;/samp&gt;&lt;br&gt;
                        &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                        &lt;button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard"&gt;Copy to Clipboard&lt;/button&gt;
                        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>