写一份新闻弹窗通知代码，带CSS美化样式

以下是一份简单的新闻弹窗通知代码，附带CSS美化样式：

HTML代码：

<div class="popup">
  <div class="popup-content">
    <div class="popup-header">
      <h2 class="popup-title">新闻通知</h2>
      <span class="popup-close">&times;</span>
    </div>
    <div class="popup-body">
      <p>这里是新闻通知的内容。</p>
    </div>
  </div>
</div>

CSS代码：

/* 弹窗样式 */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.popup-header {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
  position: relative;
}

.popup-title {
  margin: 0;
  font-size: 20px;
}

.popup-close {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;
}

.popup-body {
  padding: 20px;
}

.popup-body p {
  margin: 0;
  line-height: 1.5;
}

JavaScript代码：

// 获取弹窗元素和关闭按钮元素
var popup = document.querySelector('.popup');
var popupClose = document.querySelector('.popup-close');

// 点击关闭按钮，隐藏弹窗
popupClose.addEventListener('click', function() {
  popup.style.display = 'none';
});

// 模拟从服务器获取新闻通知内容
var newsContent = '这里是新闻通知的内容。';

// 显示弹窗，并设置新闻通知内容
popup.style.display = 'block';
document.querySelector('.popup-body p').textContent = newsContent;

说明：

1. HTML代码中，我们用一个`.popup`的`div`元素作为弹窗的容器，包含一个`.popup-content`的`div`元素作为弹窗的内容区域，以及一个`.popup-close`的`span`元素作为关闭按钮。

2. CSS代码中，我们对`.popup`和`.popup-content`进行了定位和样式设置，对`.popup-header`和`.popup-body`进行了样式设置，以及对`.popup-close`进行了定位和样式设置。

3. JavaScript代码中，我们首先获取了弹窗元素和关闭按钮元素，然后给关闭按钮添加了点击事件，点击关闭按钮时隐藏弹窗。接着，我们模拟从服务器获取了新闻通知内容，将内容设置到弹窗中，并显示弹窗。

这份代码只是一个简单的示例，可以根据实际需求进行修改和扩展。