Modal提示框插件的使用

最新推荐文章于 2022-11-26 14:14:44 发布

a476479542

最新推荐文章于 2022-11-26 14:14:44 发布

阅读量238

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/martianShu/p/5950174.html

版权

　　之前有记录过类似美化alert(),confirm()和prompt功能的插件xcConfirm，其优点是比较轻量级，能够快速接入，对于简单的提示效果明显，但其缺点就是自定义起来不方便，所以就记录一款相对较重但是可以随意定义的插件Modal，下面记录一下该款插件的使用方法，详情可参考Modal的官方文档http://v4.bootcss.com/getting-started/introduction/

　　Modal插件使用需要接入bootstrap.css和bootstrap.js，所以去bootstrap官网对应下载后临时文件夹的目录如下：

　　然后在temp.html内定义一个button和一个Modal(其中button和input的样式都来自于bootstrap.min.css :btn btn-default和form-control long),并对button设置data-target="Modal的id" data-toggle="modal" 属性来绑定对应的Modal,来实现一个简单的弹窗功能，html如下：

<!doctype html>
<html>
    <head>
        <title>Modal测试</title>
        <!--引入bootstrap样式-->
        <link type='text/css' rel='stylesheet' href="bootstrap.min.css">
        <script src='jquery.js'></script>
        <script src='bootstrap.min.js'></script>
    </head>
    <body>
        <!--为button绑定Modal-->
        <button type='button' class='btn btn-default' data-target='#myModal' data-toggle='modal'>点我点我</button>
        
        <!--Modal部分,默认不显示，内部样式自己随意定义-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 700px;margin-top: 150px;">
                <div class="modal-content" style="height: 400px;width: 700px;padding-left: 10px;padding-right: 10px">
                    <!--头部-->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">信息记录</h4>
                    </div>
                    <!--体部-->
                    <div class="modal-body" style="height: 200px">
                        <input class="form-control" placeholder="请输入标题" id="title" style="margin-bottom: 15px;"/>
                        <textarea class='form-control' placeholder="请输入内容" id="content" style='height:180px;'></textarea>
                    </div>
                    <!--尾部-->
                    <div class="modal-footer" style="margin-top: 75px;">
                        <button type="button" class="btn btn-primary btn-blue" onclick="myPrint()">确认</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

<script>
function myPrint()
{
    var title=$("#title").val();
    var content=$("#content").val();
    alert(title+"\n"+content);
}
</script>

　　然后打开页面只有一个按钮：

　　点击后就弹出Modal框：

　　这些input的样式，按钮的样式都是可以自己定义的，相对之前就方便许多。通过设置data-target="#myModal" data-toggle="modal"是让按钮自动绑定弹框，使其点击按钮时自动弹出与隐藏，其实如果只设置data-target="#myModal"就可以实现Modal框的手动弹出与隐藏了，这时只需在JS里调用

$("myModal").modal('show')和$("myModal").modal('hide')即可手动开关，这种情况比较适合于某一行带标识id参数的弹框处理，因为这时候要安排好弹框的先后顺序以及那个按钮的click()事件。最后再对Modal框上的“确定按钮”和“取消按钮”绑定对应的方法即可，恩，还是这种自定义的比较Under Control！

转载于:https://www.cnblogs.com/martianShu/p/5950174.html