jquery实现莫泰对话框

最新推荐文章于 2024-03-14 11:44:12 发布

疯狂打码中

最新推荐文章于 2024-03-14 11:44:12 发布

阅读量482

点赞数

分类专栏： js 文章标签： bootstrap html

本文链接：https://blog.csdn.net/Demo_3/article/details/73611487

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基本的实现流程

总的div{ div{主要的操作区}{} div{面罩用来覆盖后面的内容} }
总的div 主要来设置隐藏显示
操作区div 主要是用户的操作,
面罩区域的div 用来覆盖下面的内容不让用户操作

代码演示:

HTML代码

引入了bootstrap  
<body>
<!-- 基本对话框的开始 -->
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form>
                    <div class="form-group">
                        <label>用户名:</label>
                        <input type="text" name="" class="form-control">
                    </div>
                     <div class="form-group">
                        <label>密码:</label>
                        <input type="text" name="" class="form-control">
                    </div>
                     <div class="form-group">
                        <label>邮箱:</label>
                        <input type="text" name="" class="form-control">
                    </div>
                    <input type="submit" name="" class="btn btn-danger" style="width:100px" value="注册">
                    <input type="button" name="" id="edit1" class="btn btn-success pull-right" style="width:100px" value="打开">
                </form>
            </div>
        </div>
    </div>
    <!-- 基本对话框的结束 -->
    <!-- 莫泰对话框的开始 -->
    <div class="main_pop1">
         <div class="my_modal clearfix">
            <div class="row">
                <!-- <div class="col-md-6 col-md-offset-3"> -->
                    <form>
                        <div class="form-group">
                            <label>用户名:</label>
                            <input type="text" name="" class="form-control">
                        </div>
                         <div class="form-group">
                            <label>密码:</label>
                            <input type="text" name="" class="form-control">
                        </div>
                         <div class="form-group">
                            <label>邮箱:</label>
                            <input type="text" name="" class="form-control">
                        </div>
                        <input type="submit" name="" id="edit" class="btn btn-danger" style="width:100px" value="注册">
                        <input type="button" name="" id="edit2" class="btn btn-success pull-right" style="width:100px" value="关闭">
                    </form>
                </div>
            </div>
        </div>
        <!--面罩区域-->
        <div class="mask">

        </div>
    </div>
    <!--莫泰对话框的结束-->
</body>

莫泰对话框区域css代码

.mask{
    width: 100%;
    height: 100%;
    background-color: #B1BFCF;
    <!--固定定位 相对于浏览器-->
    position: fixed;
    z-index: 9990;
    left: 0px;
    top: 0px;
    opacity: 0.3;
}

.my_modal {
    width: 500px;
    position: fixed;
    left: 30%;
    top: 30%;
    z-index: 9999;
    background-color: white;
}
.main_pop1{
    display: none;
}

jquery 代码演示:

实现了 点击 弹出对话框  弹出后点击其他的区域 隐藏对话框
需要注意的是  **事件的冒泡 引起的坑**
return  false  主要是为了 阻止事件的往上传递


 <script type="text/javascript">
      $(function(){
        // 需要注意阻止冒泡事件的往上传递
        $("#edit1").click(function(){
            $(".main_pop1").show('slow/400/fast');
            return false;  // 阻止事件的传递  
        });
        // 点击关闭对话框按钮
        $("#edit2").click(function(){
            $(".main_pop1").hide('slow/400/fast');
            return false;
        });
        // 点击屏幕其他的区域关闭对话框
        $(document).click(function(){
            $(".main_pop1").hide('slow/400/fast');
        });
        // 阻止父窗体的点击事件往上传递
        $(".my_modal").click(function(){
            return false;
        })
      })
    </script>

疯狂打码中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现莫泰对话框

基本的实现流程总的div{ div{主要的操作区}{} div{面罩用来覆盖后面的内容} }总的div 主要来设置隐藏显示操作区div 主要是用户的操作, 面罩区域的div 用来覆盖下面的内容不让用户操作代码演示:HTML代码引入了bootstrap <body> <div class="container">
复制链接

扫一扫