jQuery - 向 jquery.firstVisitPopup.js 弹出窗口添加箭头

Question

我正在使用 jQuery First Visit Popup (https://www.jqueryscript.net/lightbox/jQuery-Plugin-To-Show-A-Popup-Only-Once-Per-Visitor-First-Visit-Popup.html) 在有人第一次访问网页时向它添加一个弹出窗口。它工作正常。它只是一个带有消息的方框。点击X，它会消失，点击一个链接，它又回来了。非常好。但我希望能够在框中添加一个箭头，从右下角指向下方。

我在这里找到了“使用 CSS 在工具提示中添加箭头”，https://www.tutorialspoint.com/add-arrow-in-tooltip-with-css。我已经尝试但未能使用该代码来更改首次访问弹出窗口。 这是我使用的 CSS。

#fvpp-blackout {
  display: none;
  z-index: 199;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

#my-welcome-message {
  display: none;
  z-index: 500;
  position: fixed;
  width: 20%
  left: 20%;
  top: 60%;
  padding: 20px 2%;
  font-family: Calibri, Arial, sans-serif;
  background: #282467;
  border-radius: 6px;
  color: green;
  box-shadow: 0px 0px 5px #0003;
}

#fvpp-close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

#fvpp-dialog q {
  font: 12px trebuchet ms,arial,helvetica,sans-serif;
  color:#ffffff;
  font-weight: bold;
  margin:0px;
  font-size: 2em;
}

在javascript和html中是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/jquery.firstVisitPopup.js"></script>


<script type="text/javascript">
$('#my-welcome-message').firstVisitPopup({
  cookieName : 'homepage',
  showAgainSelector: '#show-message'
});
</script>


<div id="my-welcome-message" >
  <h1>My Message</h1>
  <h1>Hover over the colored dots for more information.</h1>
</div>

Answer 1

如果您使用的是引导程序，则可以使用工具提示类（在此页面上搜索“箭头”）https://getbootstrap.com/docs/4.1/components/tooltips/

如果没有，我已经找到了一种方法，就是将箭头作为 unicode 三角形放在 div 中（您可以使用上、下、左、右等）

改编自2012年写的这篇文章https://css-tricks.com/triangle-with-shadow/。撰写本文时，还没有过滤器。

#overall {
  filter: drop-shadow(8px 8px 10px gray);
}

#arrow {
  padding-left: 25px;
  display: inline-block;
  transform: scaleX(1.5);
  color: #fff;
  font-size: 16px;
}

#blah {
  background-color: white;
  margin-top: -10px;
  padding: 10px;
  width: 300px;
  text-align: justify;
}

<div id="overall">
  <div id="arrow">
    ▲
  </div>
  <div id="blah">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non. Elementum integer enim neque volutpat. In iaculis nunc sed augue. Non arcu risus quis varius quam quisque. Leo a diam sollicitudin tempor id eu nisl nunc mi. Accumsan lacus vel facilisis volutpat est. Suscipit adipiscing bibendum est ultricies integer quis auctor. Aliquam ultrices sagittis orci a scelerisque. Velit scelerisque in dictum non consectetur. Sit amet justo donec enim diam. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris.
  </div>
</div>

我有一支代码笔，你也可以用作模板https://codepen.io/holmesrg/pen/BaRMGRq