Bootstrap modal 在移动设备上打开模态的引导问题

我有一个由php循环生成的表。每一行都有一个按钮，可以打开一个模式，在PC上它可以完美地工作。在移动设备上，我有这些问题。 1.当我第一次加载页面时，浏览器不允许我单击打开模式的按钮。要解锁它，我必须首先单击页面上的任何其他按钮（此表之外）。 2.当我打开模式时，问题在关闭后再次出现。我必须在任何其他按钮上点击两次，才能再次“解锁”那些打开modals的表

我做了几次尝试，我还尝试删除页面的所有其他元素，以了解问题是否与其他内容有关，但我没有解决任何问题。有人知道会是什么吗

<?php

if(mysql_num_rows($result_optional) > 0){

echo "<div id='div_col_sx_custom'>
<form action='' method='get'>
<table border='0' cellpadding='10' cellspacing='0' width='100%' style='line-height:10px;'>";


while($row = mysql_fetch_array( $result_optional )) {


    echo "<tr>";
    echo '<td class="align-middle td_lista">
<input type="checkbox" class="selezionabile_" id="check-'.$idcheck.'" data-prezzo="'.$prezzocheck.'"  data-di-serie="false"  data-tipo="' . $tipocheck . '" data-nome="' . $titolocheck .'" >
<label for="check-'.$idcheck.'">' . $titolo_optional . '</label>
    </td>';

    echo '<td align="right" class="td_lista_right">
<div class="tasto_info" data-toggle="modal" data-target="#ModalCenter-'.$idcheck.'">&euro;&nbsp;<b>'.number_format($prezzocheck, 2 , ',' , '.').'</b>&nbsp;&nbsp;|&nbsp;&nbsp;+INFO</div>
</td>

    <!-- Modal -->
<div class="modal fade" id="ModalCenter-'.$idcheck.'" tabindex="-1" role="dialog" aria-labelledby="ModalCenter-'.$idcheck.'" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content modal-custom">
<div class="modal-header" style="border-color:transparent">
<h5 class="modal-title" id="exampleModalLongTitle">'.$titolo_optional.'</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="close-modal-bt">&times;</span>
            </button>
          </div>
          <div class="modal-body">text</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    ';


    echo "</tr>";
    }

    echo "</table></form></div>";

}

?>