Question

我有一个引导程序模版，当我单击按钮时需要激活。现在，当渲染页面并单击“编辑”按钮时，会弹出类似阴影的内容，但不会显示带有数据的模态。我想使用onclick函数showModal（）来激活引导程序模态。任何帮助将不胜感激。谢谢

这是我的代码：

$(document).ready(function () {

    getAllBooks();


    function getAllBooks() {
        $.ajax({
            type: "GET",
            url: "/employees",
            success: function (result) {
                $.each(result, function (i, customer) {

                    var customerRow = '<tr>' +

                        '</td><td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="showModal()" id="5">Edit</button></td>' +
                        '<div class="modal fade" id="myModal" role="dialog">' +
                        '<div class="modal-dialog">' +
                        '<div class="modal-content">' +
                        '<div class="modal-header">' +
                        '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                        '<h4 class="modal-title">Modal Header</h4>' +
                        '</div>' +
                        '<div class="modal-body">' +
                        '<p>Some text in the modal.</p>' +
                        '</div>' +
                        '<div class="modal-footer">' +
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';

                    '</tr>';

                    $('#customerTable tbody').append(customerRow);

                });

                $("#customerTable tbody tr:odd").addClass("info");

            },
            error: function (e) {
                alert("ERROR: ", e);
                console.log("ERROR: ", e);
            }
         })
      }

    //function to activate bootstrap modal
    showModal = function () {
        //var buttonId = $('#5').attr('id');
        //jQuery.noConflict();
        console.log("Hello World!");
        $('#5').modal().show();
         }
      })

<html>
       <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="/js/data.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
       </head>

         <body>
         <div class="container">
          <table id="customerTable" class="table table-bordered table-hover table-responsive">
            <thead>
                <tr>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            </table>
         </div>
         </div>
      </body>

     </html>

Answer 1

您尝试将模式标记（div）放入table中。这是浏览器禁止的
在文档中定义一些div并在其中放置模式

<div class="container">
      <div id="modal"></div> 
      <table id="customerTable" class="table table-bordered table-hover table-responsive">
        <thead>
            <tr>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
     </div>
     </div>

var customerRow = '<tr>' +
                '</td><td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="showModal()" id="5">Edit</button></td></tr>'
var myModal = '<div class="modal fade" id="myModal" role="dialog">' +
                '<div class="modal-dialog">' +
                '<div class="modal-content">' +
                '<div class="modal-header">' +
                '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                '<h4 class="modal-title">Modal Header</h4>' +
                '</div>' +
                '<div class="modal-body">' +
                '<p>Some text in the modal.</p>' +
                '</div>' +
                '<div class="modal-footer">' +
                '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';

  $('#customerTable tbody').append(customerRow);
  $('#modal').append(myModal);

然后打开它

function showModal() {
   $('#myModal').modal().show(); // you can try comment this code, because bootstrap maybe open modal
}

Answer 2

1-您需要从tr中取出模态代码，并将某些地方放在表外。
2-当您按tr动态填写表格（每个表格都包含自己的客户）时，请使用next（请参见代码）
3-在showModal函数中，您必须获取客户并使用客户的数据打开模态

const $tr = $(`
<tr>
  <td>${customer.name}</td>
  <td><button>Edit</button></td>
</tr>
`);

$tr.find('button').click(function() {
  showModal(customer);
})

$('#customerTable tbody').append($tr);

Answer 3

您忘记将<div>放在<td>中，也不需要通过JS打开模式的函数。 Bootstrap自行处理。 JSFiddle

 <html>
   <head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/data.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
   </head>

     <body>
     <div class="container">
      <table id="customerTable" class="table table-bordered table-hover table-responsive">
        <thead>
            <tr>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
     </div>
     </div>
     <script>$(document).ready(function () {
       let s = '<tr>' +

                    '<td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="yourBtnId">Edit</button></td><td>' +
                    '<div class="modal fade" id="myModal" role="dialog">' +
                    '<div class="modal-dialog">' +
                    '<div class="modal-content">' +
                    '<div class="modal-header">' +
                    '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                    '<h4 class="modal-title">Modal Header</h4>' +
                    '</div>' +
                    '<div class="modal-body">' +
                    '<p>Some text in the modal.</p>' +
                    '</div>' +
                    '<div class="modal-footer">' +
                    '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div></td>' +
                '</tr>';
$('tbody').append(s);
})
</script>
  </body>

 </html>

使用javascript onclick激活Bootstrap模态

3 个答案: