小编niz*_*z0k的帖子

嗨,我的页面上有一个mailto链接,在其他broswers中工作正常.在chrome中,它会打开一个新的选项卡,其中包含mailto链接作为URL.有没有办法抑制Web开发人员的行为？

从我所看到的,似乎这是chrome的设置的功能,但我想知道是否有人有解决方法.

编辑:网站位于这里nickstestserver.com/phi-rhos-near-you这是一个drupal 7网站.这是相关的html.

<td class="table-logo" >
<a href="mailto:alphapresident@phisigmarho.org" target="_blank"><img src="/sites/default/files/email_logo.png"></img></a>          
</td>

我正在尝试根据本文并使用 Chakra Modal 组件，在 React Leaflet Circle Marker Popup 组件中的图像上创建自定义灯箱效果。该实现有效，但我遇到了 Chakra UI 的 z-index 和放置问题。我的目标是将灯箱放置在所有其余内容的顶部，目前，由于相对定位，模态框放置在地图容器部分的下方。

据我了解，Chakra Modal 组件应该放置在所有内容上，但该组件的默认 z 索引是相对于 Leaflet 图层放置的，因此会渲染在地图容器的一部分下方。将文章中的代码与模态结合使用会产生接近我想要的结果，除了模态灯箱放置在 Leaflet 地图 div 的一部分下方，显得不美观并且关闭按钮被遮挡。

我希望将灯箱 div 放置在整个文档的顶部，但我不确定如何覆盖模态组件的默认值 1400 到 2400，以便将其放置在整个地图上。覆盖多部分组件有点棘手，而且看起来 Modal z-index 值没有在Modal 主题定义中指定。我使用模态组件的灯箱如下：

import React, {useState} from 'react'
import { Modal, ModalContent, ModalBody, ModalCloseButton, Flex, ModalOverlay, ModalHeader, useDisclosure } from '@chakra-ui/react'

const LightBox = ({children, src, alt, Wrapper = 'div'}, zIndex=800) => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    //const [ …

所以，我正在使用一些 css3 弹出窗口/模式。我对它们的工作方式非常满意，但是在模式关闭后，页面滚动回到顶部，我不确定为什么会发生这种情况。

你可以在这里看到行为这是 html 的片段

   <div class="flip">
   <div class="front">
   <img src="images/SDG_ICONS/SDG01.png" alt="No Poverty" />
   </div>
   <div class="back">
      <ul>
        <a href="#ared-no-poverty"><li>ARED</li></a>
        <a href="#agrocenta-no-poverty"><li>AgroCenta</li></a>
        <a href="#tilly-no-poverty"><li>Tilly&#39;s Farm</li></a>
      </ul>
   </div>
   </div>
   <div id="ared-no-poverty" class="overlay">
     <div class="popup">
       <h2>ARED</h2>
       <a class="close" href="#"> &times;</a>
       <p class="popup">Some text in here</p>
</div>

这是我用于弹出窗口/模式的 css

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
    z-index: 2;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, …