zoukankan      html  css  js  c++  java
  • body不滚动,点击遮罩层弹框消失

    点击遮罩层,弹框消失

    阻止事件冒泡return false

    这里当弹框出现的时候让body固定不要滚动添加了.body-fixed

    .body-fixed {
        height: 100%;
        overflow: hidden
    }
       $(".weui_msg_src").click(function () {
                return false;
            })
            $('#msg4').click(function () {
                $('#msg4').fadeOut();
                $('body').removeClass('body-fixed')
            })
            $('#ms4').click(function () {
                $('#msg4').fadeIn();
                $('body').addClass('body-fixed')
            });
    <div class="weui_msg_img hide" id="msg4">
        <div class="weui_msg_com">
            <!--<div data-type="close" class="weui_msg_close close-msg"><i class="icon icon-95"></i></div>-->
            <div class="weui_msg_src">
                <div class="text" style="background: #ffffff;font-size: 1rem;">
                    <div class="weui_search_bar">
                        <input type="search" class="search-input" id='search' placeholder='关键字'
                               style="box-sizing:content-box"/>
                        <button class="jx_btn weui_btn_blue jx_btn_mini"><i class="icon icon-4"></i></button>
                    </div>
                    <form action="" class="venue-list">
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆1
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆2
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆3
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆4
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆5
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆6
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                场馆
                            </div>
                        </div>
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                <div></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
      $(".weui_msg_src").click(function () {
                return false;
            })
  • 相关阅读:
    从零搭建一个IdentityServer——资源与访问控制
    职 工 养 老 保 险 转 移—陕西省外转入
    EurekaUser-Redis
    EurekaUser-返回类型和全局异常
    C# 入门实战系列文章
    Python入门实战系列文章
    Python基础之Scrapy简介
    Python办公自动化之文件合并
    Python基础之shutil及zipfile模块
    Python基础之os模块简介
  • 原文地址:https://www.cnblogs.com/silences/p/7099968.html
Copyright © 2011-2022 走看看