时间戳

首页 > 解决方案 > 使用 javascript onclick 激活 Bootstrap 模式

javascript - 使用 javascript onclick 激活 Bootstrap 模式

问题描述

我有一个引导模式，当我单击按钮时需要激活。现在，当页面被渲染并单击编辑按钮时，会像阴影一样弹出一些东西，但没有显示带有数据的模式。我想使用 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>

标签： javascripthtml

解决方案

您尝试将模态标记 ( div) 放入table. 浏览器禁止
在您的文档中定义一些 div 并将 modal 放在那里

<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
}

推荐阅读