jquery实现弹窗淡入淡出

1. 要展示弹窗的html中增加弹窗内容如下:
<div id="executeCaseConfig" style="display: none;">
    <div class="executeCase_mask">
        <div class="title"><h4>案例执行配置<span onclick='closeExecuteCasePopup()'>X</span></h4></div>
        <div class="content">
            <label class="configName">请选择浏览器(可多选):</label>
            <div class="configName">
                <ul>
                    <li>
                        <input type="checkbox" value="chrome" class="check_view_state" name="browser"
                               id="checkbox-chrome" style="display: none;">
                        <label for="checkbox-chrome"></label>
                        <span class="browser">chrome</span>
                    </li>
                    <li>
                        <input type="checkbox" value="firefox" class="check_view_state" name="browser"
                               id="checkbox-firefox" style="display: none;">
                        <label for="checkbox-firefox"></label>
                        <span class="browser">firefox</span>
                    </li>
                    <li>
                        <input type="checkbox" value="IE" class="check_view_state" name="browser"
                               id="checkbox-IE" style="display: none;">
                        <label for="checkbox-IE"></label>
                        <span class="browser">IE</span>
                    </li>
                </ul>
            </div>

        </div>
        <div>
            <button onclick='executeCase()' class="btn_update">确定</button>
            <button onclick='closeExecuteCasePopup()' class="btn_cancel">取消</button>
        </div>
    </div>
</div>
2. 要求:
  • 1 目标: 点击<button value="show" id="show"/>展示弹窗

  • 2 目标:点击<button value="hide" id="hide"/>隐藏弹窗

3. 实现方式:
  1. 实现弹窗淡入:
$("#show").click(function(){
    $("#executeCaseConfig").fadeIn();
});
  1. 实现弹窗淡出:
$("#show").click(function(){
    $("#executeCaseConfig").fadeOut();
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值