jQuery

Question

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

我在此处 https://www.tutorialspoint.com/add-arrow-in-tooltip-with-css 找到“使用 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

如果您正在使用 bootstrap，您可以使用工具提示 class（在此页面上搜索“箭头”）https://getbootstrap.com/docs/4.1/components/tooltips/

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

改编自这篇写于 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

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

jQuery - Add Arrow to jquery.firstVisitPopup.js popup

javascript

html

css

popup