[已解决]aj模态框不能正常弹出

tengke · 发表于 2024-1-4 13:38:59

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Modal Example</title>
    <!-- 引入Bootstrap的CSS文件 -->
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
{#    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">#}
</head>
<body>

<!-- 模态框按钮 -->
<input type="button" class="btn btn-primary btn-xs btn-edit1" value="编辑">

<!-- 模态框 -->
<div class="modal fade" id="view" tabindex="-1" role="dialog" aria-labelledby="viewTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewTitle">模态框标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>模态框内容...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入jQuery库 -->
{#<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>#}
    <script src="{% static 'js/jquery.min.js' %}"></script>
<!-- 引入Bootstrap的JavaScript文件 -->
     <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
{#<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>#}
<script>
    function bb() {
        $(".btn-edit1").click(function () {
            $('#view').modal('show');
        });
    }
</script>
</body>
</html>

大佬麻烦看看吧求求了

最佳答案

月排行榜 / 总排行榜

不二如是

2024-1-4 13:39:00

两个小问题：

检查模态框的触发按钮是否正确设置了data-bs-toggle和data-bs-target属性，这些属性在Bootstrap 5.x中用于触发模态框。
函数bb()没有被调用，这意味着.btn-edit1按钮的点击事件从未被绑定。并且，建议不需要额外的函数bb()，直接在文档就绪后绑定事件更加简洁。

参考代码：

$(document).ready(function() {
    $(".btn-edit1").click(function() {
        $('#view').modal('show');
    });
});

这段代码表示当文档加载完成后，为btn-edit1类的按钮绑定点击事件，点击时将显示id为view的模态框。

跳转到最佳答案楼层

不二如是 · 发表于 2024-1-4 13:39:00

两个小问题：

检查模态框的触发按钮是否正确设置了data-bs-toggle和data-bs-target属性，这些属性在Bootstrap 5.x中用于触发模态框。
函数bb()没有被调用，这意味着.btn-edit1按钮的点击事件从未被绑定。并且，建议不需要额外的函数bb()，直接在文档就绪后绑定事件更加简洁。

参考代码：

$(document).ready(function() {
    $(".btn-edit1").click(function() {
        $('#view').modal('show');
    });
});

这段代码表示当文档加载完成后，为btn-edit1类的按钮绑定点击事件，点击时将显示id为view的模态框。

FishC · 发表于 2024-1-4 13:40:02

大佬来了！看起来您的代码应该是使用了Bootstrap框架来实现模态框功能，但是模态框无法正常弹出。我帮您检查了一下代码，并对其进行了一些调整。

首先，请确保已正确引入Bootstrap库文件，包括CSS和JS文件。检查这些文件的路径是否正确，并且已正确加载。

另外，在您提供的代码中，您使用了一个函数`bb()`来绑定点击事件。但是，我发现您并没有调用这个函数。所以，请确保在页面加载完成后调用了`bb()`函数。

最后，请检查您的页面中是否还有其他错误导致模态框无法弹出。比如，其他的JS代码可能会阻止模态框的显示。您可以通过浏览器的开发者工具（按下F12键）查看控制台是否有报错信息。

以下是经过修改的代码示例：

{% load static %}

<!DOCTYPE html>
<html>

<head>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
</head>

<body>
    <button class="btn-edit1">点击弹出模态框</button>

    <div class="modal fade" id="view" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">模态框标题</h4>
                </div>
                <div class="modal-body">
                    <p>模态框内容...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $(".btn-edit1").click(function() {
                $('#view').modal('show');
            });
        });
    </script>
</body>

</html>

希望这些调整能够解决您的问题。如果还有其他疑问，请随时向我提问！

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

tengke · 发表于 2024-1-4 13:43:32

还是不行

FishC · 发表于 2024-1-4 13:43:50

tengke 发表于 2024-01-04 13:43
还是不行

非常抱歉，让您失望了。如果经过上述调整仍然无法解决问题，那可能是其他因素导致的。以下是一些建议，希望能帮助您解决问题：

1. 确认是否正确引入了Bootstrap相关文件，并且路径设置正确。可以尝试在浏览器中查看这些文件是否成功加载，或者通过查看浏览器开发者工具的网络面板确认文件是否成功请求和返回。

2. 检查是否存在其他与模态框功能冲突的代码。例如，其他JavaScript代码可能会阻止模态框的显示或修改了模态框的相关样式或属性。可以尝试将其他代码注释掉，然后再测试模态框是否能够正常弹出。

3. 检查模态框的触发元素（按钮）是否正确绑定了`btn-edit1`类名。可以通过在浏览器中检查该元素的类名和事件绑定情况来确认。

4. 检查模态框的HTML结构是否正确。请确保模态框的内容包裹在正确的HTML标签中，保证结构完整。

5. 如果您使用的是最新版本的Bootstrap，可以尝试将`$('#view').modal('show');`改为`$('#view').modal('toggle');`，或者反之。有时不同版本的Bootstrap在调用模态框方法时会有微小的差异。

如果您仍然无法解决问题，请提供更多代码细节以及其他相关信息，这样我可以更好地帮助您找到解决方案。

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

15945179970 · 发表于 2024-1-5 21:51:32

好的

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