tengke 发表于 2023-12-19 17:17:48

python的模态框没有弹出

{% extends 'rootyongh.html' %}
{% block b %}
    <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">用户信息
          <form method="get">
    <div class="input-group">
      <input type="text" name="q" class="form-control" placeholder="Search for...">
      </form>
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
      </span>
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
      <!-- Table -->
      <table class="table">
          <tr>
    {% for s in deat %}
      <td align="left">{{ s.id }}</td>
          <td align="left">{{ s.get_j_display }}</td>
          <td align="left">{{ s.bt }}</td>
         <td align="left">{{ s.detail }}</td>
         <td align="left">{{ s.user }}</td>
               <td>
             <a href="http://127.0.0.1:8000/edit/{{ s.id }}/edit">编辑</a>

               <input uid="{{ s.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
         </td>
      <td>
<div class="modal fade" id="deleteuid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">删除</h4>
      </div>
      <div class="modal-body">
          确认要删除吗？
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button uid="{{ s.id }}" id="delete12" type="submit"class="btn btn-danger btn-xs btn-delete" onclick="delete1()">确认</button>
      </div>
    </div>
</div>
{#</div>#}

      </tr>
    {% endfor %}
   </table>
   <ul class="pagination">
      {{ymm}}</ul>
          </tr>
      </tbody>
      </table>
    </div>
</div>
    <script type="text/javascript">
    var DELETE_ID;
    $(function () {
      console.log("aja2 function called");
          {#$('#Modal').modal('show');#}
          {#      btn4();#}
          {#      btn412();#}
      delete1();
    })
    var csrfToken = "{{ csrf_token }}";
    function delete1() {
      $(".btn-delete").click(function() {
            {#alert("sc")#}
            $("#deleteuid").modal('show');
            DELETE_ID=$(this).attr("uid");
            var uid=$(this).attr("uid");
            console.log(uid);
      });
    }
</script>
{% endblock %}



麻烦大佬看看 找不到那里有问题了

FishC 发表于 2023-12-19 17:17:49

tengke 发表于 2023-12-19 17:51
检查了对应 id绑定名字 和对应的模态动态窗口
是不 ...

不，input元素是可以在模态框中使用的。通常在模态框中，你可以放置各种元素，包括input、button等等。确保你在模态框中正确地使用了input元素，并且设置了正确的id和name属性。

如果你的模态框依然没有弹出，我建议你再检查一下以下几点：

1. 确保你的模态框触发器（比如按钮或链接）的代码是否正确。检查一下事件绑定的元素和事件类型是否与模态框匹配。

2. 确保你的模态框容器的id与触发器的目标值（target）相匹配。模态框容器应该有一个唯一的id，并且它必须与触发器中的目标值相匹配。

3. 检查一下你是否正确引入了必要的JavaScript文件（例如，jQuery和Bootstrap的JS文件）。在你的HTML文件中，确保你已经引入了这些文件，并且它们的路径是正确的。

如果你仍然遇到问题，请提供更多的代码和错误信息，这样我就可以更好地帮助你解决问题了。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

FishC 发表于 2023-12-19 17:18:01

从你提供的代码中，很难确定模态框为什么没有弹出。但是，我可以给你一些建议来解决这个问题。

首先，确保你已经正确引入 Bootstrap 的 CSS 和 JS 文件。你可以在头部的 `<head>` 标签中添加以下代码：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

其次，检查你的模态框的代码是否正确。你的代码中使用了 `$("#deleteuid").modal('show')` 来显示模态框，所以请确保你的 HTML 代码中有一个 id 为 `deleteuid` 的元素作为模态框容器。例如：

<div class="modal fade" id="deleteuid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框内容 -->
    </div>
</div>
</div>

最后，检查一下浏览器的开发者工具，看看是否有任何错误消息或警告。你可以通过按下 `F12` 键打开开发者工具（在大多数浏览器中都适用）。

希望以上建议能帮到你！如果还有问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

tengke 发表于 2023-12-19 17:51:05

FishC 发表于 2023-12-19 17:18
从你提供的代码中，很难确定模态框为什么没有弹出。但是，我可以给你一些建议来解决这个问题。

首先，确保 ...

检查了对应 id绑定名字 和对应的模态动态窗口
是不是 input不能使用弹出呢

tengke 发表于 2023-12-19 18:10:11

{% extends 'rootyongh.html' %}
{% block b %}
    <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">用户信息
          <form method="get">
    <div class="input-group">
      <input type="text" name="q" class="form-control" placeholder="Search for...">
      </form>
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
      </span>
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
      <!-- Table -->
      <table class="table">
          <tr>
    {% for s in deat %}
      <td align="left">{{ s.id }}</td>
          <td align="left">{{ s.get_j_display }}</td>
          <td align="left">{{ s.bt }}</td>
         <td align="left">{{ s.detail }}</td>
         <td align="left">{{ s.user }}</td>
               <td>
             <a href="http://127.0.0.1:8000/edit/{{ s.id }}/edit">编辑</a>
               <input uid="{{ s.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除"
                         data-toggle="modal" data-target="#deleteuid">
         </td>
      <td>
<div class="modal fade" id="deleteuid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">删除</h4>
      </div>
      <div class="modal-body">
          确认要删除吗？
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button uid="{{ s.id }}" id="delete12" type="submit"class="btn btn-danger btn-xs btn-delete"
                onclick="delete1()">确认</button>
      </div>
    </div>
</div>
</div>
      </tr>
    {% endfor %}
   </table>
   <ul class="pagination">
      {{ymm}}</ul>
          </tr>
      </tbody>
      </table>
    </div>
</div>
    <script type="text/javascript">
    var DELETE_ID;
    $(function () {
      console.log("aja2 function called");
          {#$('#Modal').modal('show');#}
          {#      btn4();#}
          {#      btn412();#}
      delete1();
    })
    var csrfToken = "{{ csrf_token }}";
    function delete1() {
      $(".btn-delete").click(function() {
            {#alert("sc")#}
            $('#deleteuid').modal('show');
            DELETE_ID=$(this).attr("uid");
            var uid=$(this).attr("uid");
            console.log(uid);
      });
    }
</script>
{% endblock %}
缺少参数正确的代码

FishC 发表于 2023-12-19 18:10:29

tengke 发表于 2023-12-19 18:10
{% extends 'rootyongh.html' %}
{% block b %}
    ...

根据你提供的代码，我看到你使用了`{% for s in deat %}`循环来生成一些HTML内容。在生成的HTML代码中，我注意到你使用了`class="btn-delete"`来标记删除按钮，并且给这些按钮添加了一个`uid`属性。

如果你希望点击删除按钮时触发模态框弹出，并且获取到对应的`uid`值，以下是一个示例的HTML代码：

{% extends 'rootyongh.html' %}

{% block b %}
    用户信息
    {% for s in deat %}
      {{ s.id }}{{ s.get_j_display }}{{ s.bt }}{{ s.detail }}{{ s.user }}
      编辑
      <button class="btn-delete" uid="{{ s.id }}">删除</button>
    {% endfor %}

    <!-- 删除确认模态框 -->
    <div id="deleteModal" class="modal">
      <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">确认要删除吗？</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-danger" onclick="confirmDelete()">确认</button>
                </div>
            </div>
      </div>
    </div>

    <script>
      var DELETE_ID;
      $(function () {
            console.log("aja2 function called");
            delete1();
      });

      function delete1() {
            $(".btn-delete").click(function() {
                $('#deleteModal').modal('show');
                DELETE_ID = $(this).attr("uid");
                console.log(DELETE_ID);
            });
      }

      function confirmDelete() {
            console.log("Deleting ID:", DELETE_ID);
            // 在这里执行删除操作
            $('#deleteModal').modal('hide');// 关闭模态框
      }
    </script>
{% endblock %}

在这个示例中，我们创建了一个ID为`deleteModal`的模态框容器，包含了确认删除的提示信息和取消、确认两个按钮。当点击删除按钮时，我们使用`$('#deleteModal').modal('show')`来显示模态框，并且将对应的`uid`值存储在全局变量`DELETE_ID`中。然后，我们可以在确认删除按钮的`onclick`事件中调用`confirmDelete()`函数来执行删除操作。在这个函数中，你可以根据需要编写删除的逻辑。

请注意确保正确引入所需的Bootstrap和jQuery文件，以及在代码中设置了正确的模态框容器ID。我希望这个示例能帮助你解决问题。如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页: [1]
查看完整版本: python的模态框没有弹出