jquery实现弹窗淡入淡出

1. 要展示弹窗的html中增加弹窗内容如下:

<div id="executeCaseConfig" style="display: none;">
    <div class="executeCase_mask">
        <div class="title"><h4>案例执行配置<span onclick='closeExecuteCasePopup()'>Xspan>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">chromespan>
                    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">firefoxspan>
                    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">IEspan>
                    li>
                ul>
            div>

        div>
        <div>
            <button onclick='executeCase()' class="btn_update">确定button>
            <button onclick='closeExecuteCasePopup()' class="btn_cancel">取消button>
        div>
    div>
div>

2. 要求:

  • 1 目标: 点击

  • 2 目标:点击

3. 实现方式:

  1. 实现弹窗淡入:
$("#show").click(function(){
    $("#executeCaseConfig").fadeIn();
});
  1. 实现弹窗淡出:
$("#show").click(function(){
    $("#executeCaseConfig").fadeOut();
});

你可能感兴趣的:(前端)