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;
            })
  • 相关阅读:
    Tomcat部署项目
    正则表达式
    文件的上传和下载
    实现扫码登陆
    onepill Android端
    部署SpringBoot到阿里云
    Gson
    HTML自动刷新页面
    Spring Data JPA根据属性名查询
    Spring Date JPA实现增删改查
  • 原文地址:https://www.cnblogs.com/silences/p/7099968.html
Copyright © 2011-2022 走看看