主页 / 问题 / 1424978
Accepted
Павел Ромадов
Asked:2022-08-29 14:57:38 +0000 UTC2022-08-29 14:57:38 +0000 UTC

向弹出框添加一个闭合十字并对其进行自定义

  • 772

我正在使用 Bootstrap 4.6 和 popover 组件。

有必要添加一个十字，按下时也应将其关闭。另外，我尝试通过title="+"来实现它，但是如何使它使十字形相同，如图所示，即可以为其规定必要的属性。

在此处输入图像描述

вёрстка

1 个回答

  1. Best Answer

    例子

    $(function() {
  $('[data-toggle="popover"]').popover({
    placement: "right",
    html: true,
    title: '<a href="#" class="close" data-dismiss="alert"></a>',
    content: '<div>Excellent Bootstrap popover! I really love it.</div>'
  });
  $(document).on("click", ".popover .close", function() {
    $(this).parents(".popover").popover("hide");
  });
});
    body {
  padding: 4rem 2rem;
}

.popover .close {
  width: 1rem;
  height: 1rem;
  display: flex;
  position: relative;
  margin-left: auto;
  float: none;
}

.popover .close::before,
.popover .close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 2px;
  background-color: #5A5A5A;
  margin: -1px 0 0 -.5rem;
  transform: rotate(45deg);
  cursor: pointer;
  border-radius: 2px;
}

.popover .close::after {
  transform: rotate(-45deg);
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<button type="button" class="btn btn-lg btn-danger js-button-popover" data-toggle="popover">
  Click to toggle popover
</button>

    • 1

相关问题