JavaWeb——【前端】——Bootstrap的模态框

最新推荐文章于 2024-03-11 08:47:42 发布

狮子座的程序员

最新推荐文章于 2024-03-11 08:47:42 发布

阅读量514

点赞数 1

分类专栏： # Web前端

本文链接：https://blog.csdn.net/weixin_42247720/article/details/104968241

版权

Web前端专栏收录该内容

28 篇文章 5 订阅

订阅专栏

结果展示

出现一个模态框进行显示或者数据的输入与传输
**用途：**刚刚其实已经说过了，1.进行数据的显示 2.进行form的input表单的配合进行数据的传输，不过值得一提的是，模态框不能通过form的action属性进行重定向，需要通过js+ajax进行数据的json格式传输或者直接获取数据用get为后缀的方式。在这里插入图片描述

实现代码

<html>
<head>
 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
 <script type="text/javascript"   src="jquery.min.js"></script>
 <script type="text/javascript"   src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
      <button   class="btn btn-success"   data-toggle="modal" data-target="#myModal">点击弹出</button>
    <!--个人信息模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        个人信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="text" placeholder="请输入用户名">
                    </form>
                </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>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
   
</body>
</html>

注意事项

这里使用的是bootstrap，模态框是bootstrap的非常重要的组件，不懂的博友们可以去百度学习一下。

狮子座的程序员

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb——【前端】——Bootstrap的模态框

结果展示出现一个模态框进行显示或者数据的输入与传输**用途：**刚刚其实已经说过了，1.进行数据的显示 2.进行form的input表单的配合进行数据的传输，不过值得一提的是，模态框不能通过form的action属性进行重定向，需要通过js+ajax进行数据的json格式传输或者直接获取数据用get为后缀的方式。实现代码<html><head> <lin...
复制链接

扫一扫