标签:eee css span UNC time text index auto white
1、HTML部分
<button onclick="showPopup()">按這裡</button> <div id="background"></div> <div id="popup"> <div style="width:35%; margin: auto"> <div id="close"> <span id="close_popup" onclick="closePopup();">×</span> <h2 id="popup_title">這裡是彈窗標題</h2> </div> <div id="popup_content">是否處理下這個彈窗?</div> <div id="popup_foot"> <button>是的</button> <button>不,我再考慮一下</button> </div> </div> </div>
2、CSS部分
#background { margin: 0; padding: 0; display: none; position: fixed; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } #popup { display: none; position: fixed; width: 100%; z-index: 1001; margin: 15% auto; overflow: auto; background-color: rgba(0, 0, 0, 0); } #close { padding: 5px; background: black; } #popup_title { margin: 10px 0; color: white; font-size: 16px; padding-left: 15px; } #close_popup { color: white; cursor: pointer; float: right; font-size: 30px; padding-right: 15px; } #popup_content { background: #eeeeee; margin: auto; height: 200px; padding: 0 20px; font-size: 16px; } #popup_foot { padding: 5px 0; padding-bottom: 15px; text-align: center; background: #eee; }
3、JS部分
<script src="/static/js/jquery-2.2.0.min.js"></script> <script> function showPopup() { $("#background").css("display", "block"); $("#popup").css("display", "block"); } function closePopup() { $("#background").css("display", "none"); $("#popup").css("display", "none"); } </script>
标签:eee css span UNC time text index auto white
原文地址:https://www.cnblogs.com/xmcwm/p/12134164.html