Это связано с тем, что ваш модальный id является цифрой c. Если вы изменяете модальное значение id на _1, а значение кнопки data-target на #_1, то начинает работать .
Если разобраться в этой проблеме, в вашем примере
document.getElementById('1')
... возвращает модальное значение, но
document.querySelector('#1')
... возвращает ошибку:
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.
Я предполагаю, что внутренне Bootstrap использует querySelector, передавая атрибут data-target вашей кнопки. Однако, поскольку ошибки не отображаются, я предполагаю, что все это происходит в блоке try / catch. Хотя я могу ошибаться, я просто размышляю.
... и, , глядя еще дальше в вопросе выясняется, что селекторы, начинающиеся с цифр , технически действительны , но требуют дальнейшей обработки. А именно, ваш атрибут <button> s data-target должен быть data-target="#\31" или data-target="#\000031", если вы действительно хотите использовать числовые идентификаторы c.
См. Это работает .
И это даже не Bootstrap Speci c, это то, как работают селекторы DOM:
#\31 { color: red; }
.\32 { color: blue; }
<span id="1">red</span>
<span class="2">blue</span>
Еще одна вещь (не связанная напрямую): вам не хватает требуемого popper.js импорта (см. Quickstart ). Это требуется для всплывающих окон, всплывающих подсказок и т. П., Которые помещают их непосредственно в <body>, но располагают их правильно, как если бы они были дочерними элементами элемента, находящегося в центре, так что всплывающее окно может переполнить родителей с помощью overflow: hidden. Как правило, вы хотите включить его.