设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Python交流 › python的模态框没有弹出
返回列表 发新帖
查看: 1582|回复: 5

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

[复制链接]
tengke
发表于 2023-12-19 17:17:48 | 显示全部楼层 |阅读模式
5鱼币
{% 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

查看完整内容

不，input元素是可以在模态框中使用的。通常在模态框中，你可以放置各种元素，包括input、button等等。确保你在模态框中正确地使用了input元素，并且设置了正确的id和name属性。 如果你的模态框依然没有弹出，我建议你再检查一下以下几点： 1. 确保你的模态框触发器（比如按钮或链接）的代码是否正确。检查一下事件绑定的元素和事件类型是否与模态框匹配。 2. 确保你的模态框容器的id与触发器的目标值（target）相匹配。模态 ...

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

首先，确保你已经正确引入 Bootstrap 的 CSS 和 JS 文件。你可以在头部的 `<head>` 标签中添加以下代码：
  1. <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  2. <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
  3. <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
复制代码

其次，检查你的模态框的代码是否正确。你的代码中使用了 `$("#deleteuid").modal('show')` 来显示模态框，所以请确保你的 HTML 代码中有一个 id 为 `deleteuid` 的元素作为模态框容器。例如：
  1. <div class="modal fade" id="deleteuid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  2.   <div class="modal-dialog">
  3.     <div class="modal-content">
  4.       <!-- 模态框内容 -->
  5.     </div>
  6.   </div>
  7. </div>
复制代码

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

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

首先，确保 ...

检查了对应 id绑定名字 和对应的模态动态窗口  
是不是 input不能使用弹出呢
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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 %}
缺少参数正确的代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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代码：
  1. {% extends 'rootyongh.html' %}
  3. {% block b %}
  4.     用户信息
  5.     {% for s in deat %}
  6.         {{ s.id }}  {{ s.get_j_display }}  {{ s.bt }}  {{ s.detail }}  {{ s.user }}
  7.         编辑
  8.         <button class="btn-delete" uid="{{ s.id }}">删除</button>
  9.     {% endfor %}
  11.     <!-- 删除确认模态框 -->
  12.     <div id="deleteModal" class="modal">
  13.         <div class="modal-dialog">
  14.             <div class="modal-content">
  15.                 <div class="modal-header">
  16.                     <h5 class="modal-title">确认要删除吗？</h5>
  17.                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  18.                 </div>
  19.                 <div class="modal-footer">
  20.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
  21.                     <button type="button" class="btn btn-danger" onclick="confirmDelete()">确认</button>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.     </div>
  27.     <script>
  28.         var DELETE_ID;
  29.         $(function () {
  30.             console.log("aja2 function called");
  31.             delete1();
  32.         });
  34.         function delete1() {
  35.             $(".btn-delete").click(function() {
  36.                 $('#deleteModal').modal('show');
  37.                 DELETE_ID = $(this).attr("uid");
  38.                 console.log(DELETE_ID);
  39.             });
  40.         }
  42.         function confirmDelete() {
  43.             console.log("Deleting ID:", DELETE_ID);
  44.             // 在这里执行删除操作
  45.             $('#deleteModal').modal('hide');  // 关闭模态框
  46.         }
  47.     </script>
  48. {% endblock %}
复制代码

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

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-24 01:25

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表