模态框 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <title></title>
        <script type="text/javascript">
            $(function(){
                $("#update").click(function(){
                    var a=$("#text1").val();
                    $("#text2").val(a);
                    $("#myModal").on("on.bs.modal",function(){
                        
                    })
                });
                
                $("#ok").click(function(){
                    var a=$("#text2").val();
                    $("#text1").val(a);
                    $("#myModal").on("hidden.bs.modal",function(){
                        
                    }).modal("hide");
                })
                
            })
        </script>
    </head>
    <body>
        <div class="container" style="margin-top: 100px;">
            <input type="text" readonly value="信息" id="text1" />
            <button class="btn" id="update"  data-toggle="modal" data-target="#myModal">更改</button>
            <div class="modal modal-dialog" id="myModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="close text-right" data-dismiss="modal">&times;</div>
                        <div class="modal-title">修改文本</div>
                    </div>
                    <div class="modal-body">
                        <input type="text" id="text2"/>
                    </div>
                    <div class="modal-footer">
                        <button id="ok" class="btn">确定</button>
                        <button class="btn" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

运行结果：

 

 点击更改

 

 

修改里面的信息后，确定

 

知识点：

  • class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
  • data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
  • class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
  • class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
  • data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

 

参考：https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

posted @ 2020-12-04 19:14  檐下赏雨  阅读(189)  评论(0)    收藏  举报