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. 實現方式:
- 實現彈窗淡入:
$("#show").click(function(){
$("#executeCaseConfig").fadeIn();
});
- 實現彈窗淡出:
$("#show").click(function(){
$("#executeCaseConfig").fadeOut();
});