js简单弹窗

2024-03-06

字数统计:289字阅读时长≈1分

js简单弹窗实现，弹窗默认隐藏，点击Open Popup弹出，点击Close或弹窗外围隐藏，文心一言生成

弹窗效果

源代码

HTML代码片段

<button id="openPopup">Open Popup</button>  
  
<div id="popupContainer" class="popup-container" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: none;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;">  
    <div id="popup" class="popup" style="background-color: #fff;border-radius: 10px;padding: 20px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);animation: fadeIn 0.3s;">  
        <h2>Popup Title</h2>  
        <p>This is a simple popup with rounded corners and a fade-in animation.</p>  
        <button id="closePopup">Close</button>  
    </div>  
</div>

JavaScript代码片段

  <script>  
    document.getElementById('openPopup').addEventListener('click', function() {  
        document.getElementById('popupContainer').style.display = 'flex';  
    });  
  
    document.getElementById('closePopup').addEventListener('click', function() {  
        document.getElementById('popupContainer').style.display = 'none';  
    });  
  
    window.addEventListener('click', function(event) {  
        if (event.target == document.getElementById('popupContainer')) {  
            document.getElementById('popupContainer').style.display = 'none';  
        }  
    });  
</script>