[已解决]python的模态框没有弹出

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

{% extends 'rootyongh.html' %}
{% block b %}
<div class="bs-example" data-example-id="panel-without-body-with-table">
<div class="panel panel-default">
   
   <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>
  </div>
</div>
   
   <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">×</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: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">
   
   <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>
  </div>
</div>
   
   <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">×</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">×</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 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册

[已解决]python的模态框没有弹出

最佳答案

本帖被以下淘专辑推荐: