weixin_42325166
2021-04-16 23:35
采纳率: 100%
浏览 68
已采纳

HTML一引入boostrap 模态对话框就弹不出来?

<link rel="stylesheet" href="/static/css/bootstrap.min.css">

我一引入,然后点击事件一按

 $(function () {
            $('#addModal').click(function () {
                $('#shadow,#modal').removeClass('hide');
黑色的遮盖层能显示,模态对话框不显示

div标签的class确实也把hide给移除了

奇怪的是我另一个页面 也同样引入了boostrap,但是模态对话框能显示

这是class页面的代码

<html lang="en">
<head>
    <meta charset="UTF-8">
 <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <title>Title</title>


</head>
<body>
    <h1>Class list</h1>
    <div>
        <a  href="/add_class">add</a>
        <a  id="addModal"">add(2)</a>
    </div>
    <table class="table table-striped table table-bordered table table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>class_name</th>
                <th>Operations</th>
            </tr>
        </thead>
        <tbody>
            {% for row in class_list %}
                <tr>
                    <td>{<!-- -->{ row.id }}</td>
                    <td>{<!-- -->{ row.title }}</td>

                    <td>
                        <a class="glyphicon glyphicon-pencil" href="/edit_class/?nid={<!-- -->{ row.id }}">edit</a>
                        |
                        <a  href="/del_class/?nid={<!-- -->{ row.id }}">a</a>
                        |
                        <a class="editmodal">a</a>
                    </td>
                {% endfor %}


                </tr>
        </tbody>
    </table>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position:fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 999;
        }
        .modal{
            position:fixed;
            left: 50%;

            top:  50%;
            width: 400px;
            height: 300px;
            background-color: white;
            z-index: 1000;
            margin-left: -200px;
            margin-top: -200px;

        }
    </style>
    <div id="shadow"  class="shadow hide" ></div>
    <div id="modal" class="modal hide" >
            <p>
                <input id="title" type="text" name ='title'>
            </p>
            <input type="submit" value="submit" id="addajax"><span id="errormsg"></span>
            <input type="button" value="cancel" id="cancel">
    </div>
    <div id="Editmodal" class="modal hide" >
            <h3>编辑框</h3>
            <p>
                <input id="edittitle" type="text" name ='edittitle'>
                <input id="editid" type="text" name ='editid' style="display: none">
            </p>
            <input type="submit" value="submit" id="editajax""><span id="errormsg2"></span>
            <input type="button" value="取消" id="cancel2">
    </div>
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $('#addModal').click(function () {
                $('#shadow,#modal').removeClass('hide');

            })
            $('#addajax').click(function () {
                $.ajax({
                    url:'/addmodalclass/',
                    type:'POST',
                    data:{'title':$('#title').val()},
                    dataType: 'JSON',
                    success:function(arg) {
                        if (arg.status){
                            window.location.reload();
                        }else{
                            $('#errormessage').text(arg.message);

                        }
                    }
                })
                            })
            $('#cancel').click(function () {
                $('#shadow,#modal').addClass('hide')
                        })
            $('.editmodal').click(function () {
                 $('#shadow,#Editmodal').removeClass('hide');
                 /*
                 填默认信息:
                 1、找当前标签:$(this)
             2.$(this).parent().prevAll()当前标签之前的所有信息
             3.从近到远012  .text取文本信息


                  */
                var tds=$(this).parent().prevAll();
                var class_id=$(tds[1]).text();
                var class_title=$(tds[0]).text();


                $('#edittitle').val(class_title);
                $('#editid').val(class_id);

                console.log(class_title,class_id);



            })
            $('#cancel2').click(function () {
                $('#shadow,#Editmodal').addClass('hide')
                        })
            $('#editajax').click(function () {
                $.ajax({
                    url:'/editmodalclass/',
                    type: 'POST',
                    data:{'title':$('#edittitle').val(),'id':$('#editid').val()},
                    dataType:'JSON',// 默认先把arg从字符串转化成对象,就不用在后面自己转化了。
                    success:function (arg) {
                        //JSON.parse(arg)//arg必须是json序列化的结果
                        if(arg){
                            window.location.reload();
                        }else{
                            $('#errormessage').text(arg.message);
                        }

                    }

                })

            })

            })
    </script>
</body>
</html>

这是students的代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <title>Title</title>
</head>
<body>
    <h1>STUDENTS list</h1>
    <div>
        <a class="btn btn-primary" href="/add_students/">add</a>
        <a class="btn btn-primary" id="addmodalstudents">对话框添加学生</a>
    </div>
    <table class="table table-striped table table-bordered table table-hover">
        <thead>
            <tr>
                    <th>ID</th>
                    <th>student_name</th>
                    <th>classid</th>
                    <th>Operations</th>


            </tr>
        </thead>
        <tbody>
            {% for row in students_list %}
                <tr>
                        <td>{{ row.id }}</td>
                        <td>{{ row.name }}</td>
                        <td class_id="{{ row.class_id }}">{{ row.title }}</td>

                        <td>
                            <a class="btn_edit glyphicon glyphicon-trash" href="delete_students/?nid={{ row.id }}">DEL</a>
                            |
                            <a class="glyphicon glyphicon-pencil" href="/edit_students/?nid={{ row.id }}">EDIT</a>
                            |
                            <a  class="glyphicon glyphicon-pencil btn_edit" >EDIT2</a>

                        </td>
                <tr/>
                    {% endfor %}
        </tbody>
    </table>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position:fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 999;
        }
        .addmodal{
            position:fixed;
            left: 50%;

            top:  50%;
            width: 400px;
            height: 300px;
            background-color: white;
            z-index: 1000;
            margin-left: -200px;
            margin-top: -200px;

        }
    </style>
    <div id="shadow" class="shadow hide"></div>
    <div id="addmodal" class="addmodal hide">
        <p>
            <input id="addname" type="text" name="name" placeholder="姓名">
        </p>
        <p>
            班级:
            <select id="addclassid" name="classID">
                {% for row in class_list %}
                <option value="{{ row.id }}">{{ row.title }}</option>
                {% endfor %}
            </select>
        </p>
        <input id="addajax" type="button" value="add">
        <span id="errormessage" style="color: red"></span>
        <input id="cancel" type="button" value="cancel">



    </div>
    <div id="editmodal" class="addmodal hide">
    <h3>edit information</h3>
        <p>
            <input id="editname" type="text" name="name" placeholder="姓名">
            <input id="editid" style="display: none">
        </p>
        <p>
            班级:
            <select id="editclassid" name="classID">
                {% for row in class_list %}
                <option value="{{ row.id }}">{{ row.title }}</option>
                {% endfor %}
            </select>
        </p>
        <input id="editajax" type="button" value="edit">
        <span id="errormessage" style="color: red"></span>
        <input id="cancel2" type="button" value="cancel">



    </div>
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script>


        $(function () {
            $('#addmodalstudents').click(function () {
                $('#shadow,#addmodal').removeClass('hide');



            })
            $('#addajax').click(function () {
                $.ajax({
                    url:'/addmodalstudents/',
                    type:'POST',
                    data:{'name':$('#addname').val(),'class_id':$('#addclassid').val()},
                    success:function(arg) {

                        arg=JSON.parse(arg);
                        if (arg.status){
                            window.location.reload();
                        }else{
                            $('#errormessage').text(arg.message);

                        }
                    }
                })
                            })
            $('#cancel').click(function () {
                $('#shadow,#addmodal').addClass('hide')
                        })
            $('.btn_edit').click(function () {
                 $('#shadow,#editmodal').removeClass('hide');
                 /*
                 填默认信息:
                 1、找当前标签:$(this)
             2.$(this).parent().prevAll()当前标签之前的所有信息
             3.从近到远012  .text取文本信息


                  */
                var tds=$(this).parent().prevAll();
                var studentsid=$(tds[2]).text();
                var studentsname=$(tds[1]).text();
                var classid=$(tds[0]).attr('class_id'); //把自定的class_id里面的row.id拿过来
                $('#editname').val(studentsname);
                $('#editid').val(studentsid);
                $('#editclassid').val(classid);

                console.log(studentsid,studentsname,classid);



            })
            $('#cancel2').click(function () {
                $('#shadow,#editmodal').addClass('hide')
                        })
            $('#editajax').click(function () {
                $.ajax({
                    url:'/editmodalstudents/',
                    type: 'POST',
                    data:{'nid':$('#editid').val(),'class_id':$('#editclassid').val(),'name':$('#editname').val()},
                    dataType:'JSON',// 默认先把arg从字符串转化成对象,就不用在后面自己转化了。
                    success:function (arg) {
                        //JSON.parse(arg)//arg必须是json序列化的结果
                        if(arg){
                            window.location.reload();
                        }else{
                            $('#errormessage').text(arg.message);
                        }

                    }

                })

            })

            })


    </script>

</body>
</html>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • wanmeikakaxi 2021-04-17 07:10
    已采纳

    原因就在于modal这个元素,因为modal元素在bootstrap默认是display: none,你通过内联设置modal css提升后,但是没有display: block;,导致没有显示出来。

    在你的内联css添加display: block;即可

    .modal{

    *******

    ******

    display: block;

    }

    其他具体看截图,不懂再追问,满意就采纳

     

     

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 看看2个页面css样式是不是一样,应该是样式有冲突。

    评论
    解决 无用
    打赏 举报
  • wanmeikakaxi 2021-04-16 23:42

    使用浏览器F12开发者模式查看一下哪里报错,如果没有报错,检查一下css属性元素等等是否有添加。

    如方便的话,请帖上部分完整代码,这样好解决问题

    评论
    解决 无用
    打赏 举报
  • 有问必答小助手 2021-04-19 11:52

    您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    评论
    解决 无用
    打赏 举报
  • 有问必答小助手 2021-04-19 17:31

    非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

    速戳参与调研>>>https://t.csdnimg.cn/Kf0y

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题