Я хочу вызвать модал, который я создал, когда в браузере выбран какой-то фрагмент текста. Я обработал часть выделения текста, но не могу запустить модальное. Я пытался сделать следующее:
Вот мой модал:
<div class="modal fade" id="eliaModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select an Option</h4>
</div>
<div class="modal-body">
<p1 class="labelHeadingClass" id="selectedHeadP"></p1>
<p1 class="labelTextClass" id="selectedTextP"></p1>
<br/>
<p1 class="labelHeadingClass" id="translatedHeadP"></p1>
<p1 class="labelTextClass" id="translatedTextP"></p1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="translateP" >Translate</button>
<button type="button" class="btn btn-default" id="extractText" >Extract Text</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
А вот как я это называю в моем файле background.js, где обрабатывается сообщение:
$("#eliaModal").modal("show");
Ничего не происходит. Я убедился, что этот код выполняется, и локализовал проблему здесь. Моя идея заключается в том, что файл background.js пытается найти этот модал на веб-странице, которую просматривает пользователь, тогда как модал находится в отдельном HTML-файле. Я чувствую, что должен внедрить это в веб-страницу, которую просматривает пользователь, но я не смог найти правильный способ сделать это, и я даже не уверен, что это правильный путь. Буду признателен, если кто-нибудь укажет мне правильное направление.