Question

我有一个模式，我想在显示模式之前要求用户进行身份验证（使用模式内容覆盖服务器文件）。

我希望用户单击我的editmodal按钮，以显示一个连接表单，如果它与我的json base64编码数据相同，则会显示该模式。

我的问题：我无法让我的模态与其中任何一个一起显示

$('#Modal').modal();
$('#Modal').modal('toggle');
$('#Modal').modal('show');

我的代码是：

<button id="buttonmodal" type="button" class="btn btn-primary"  data-target="#exampleModal">

（我删除了要在js中执行的数据触发）

<!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="    width: 600px;
          height: 600px;">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button id="closebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form action="" name="modal-form" style="width: 100%; height:70%" method="post">
              <textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
              <div class="modal-footer">
                <button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
              </div>
              </form>
            </div>
          </div>
        </div>
      </div>

我的js现在很简单：

$('#buttonmodal').click(function() {
debugger;
 var text = $('#data').text();
 $('#textarea_modal').val(text);
    $('#exampleModal').modal('show');
});

如果您有任何提示或其他方法可以这样做，将会很有帮助。

Answer 1

您正在寻找id为“模态”，而您的组件正在使用id为“ exampleModal”的类“ modal”。 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

要解决此问题，您可能需要将代码更改为：

$('.modal').modal();
$('.modal').modal('toggle');
$('.modal').modal('show');

或

$('#exampleModal').modal();
$('#exampleModal').modal('toggle');
$('#exampleModal').modal('show');

这完全取决于您希望如何找到组件。

注意：＃用于 ID ，而。用于班级

Answer 2

尝试一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

    <!-- Button to Open the Modal 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> -->
    <button type="button" class="btn btn-primary" id="buttonmodal">
      Open modal
    </button>

    <!-- The Modal -->
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content" style="width: 600px; height: 600px;">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            <form action="" name="modal-form" style="width: 100%; height:70%" method="post">
            <textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
          </div>

        </div>
      </div>
    </div>


<script>
    $('#buttonmodal').click(function() {
    debugger;
     var text = $('#data').text();
     $('#textarea_modal').val("test 123");
        $('#myModal').modal('show');
    });
</script>

</body>
</html>

Answer 3

好吧，我笨了，解决方法是：我的css链接指向bootstrap 4.3上的点，我的脚本使用的是旧版本，所以我有冲突版本，控制台中未显示。

请帮助的人

Bootstrap 4 Modal js触发器不起作用？

3 个答案: