BootStrap 사용자 정의 팝오버는 클릭 영역 숨기기 기능을 구현합니다.

이 기사는 주로 BootStrap 사용자 정의 팝오버 및 클릭 영역 숨기기 기능을 구현하는 방법에 대한 기사를 공유합니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

부트스트랩을 사용할 때 어딘가에 도움말 버튼을 추가해야 하는 경우가 종종 있습니다. 부트스트랩에 대해 잘 아는 전문가라면 댓글로 남겨주세요.

코드는 다음과 같습니다

앞의 버튼은 pop으로 정의해야 합니다.

$(function(){
    $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true,
      title: function () {
        return $("#src-title").html();
      },
      content: function () {
       return $("#data-content").html(); // 把content变成html
      }});
    $('body').click(function (event) {
      var target = $(event.target);    // 判断自己当前点击的内容
      if (!target.hasClass('popover')
          && !target.hasClass('pop')
          && !target.hasClass('popover-content')
          && !target.hasClass('popover-title')
          && !target.hasClass('arrow')) {
        $('.pop').popover('hide');   // 当点击body的非弹出框相关的内容的时候，关闭所有popover
      }
    });
    $(".pop").click(function (event) {
      $('.pop').popover('hide');     // 当点击一个按钮的时候把其他的所有内容先关闭。
      $(this).popover('toggle');     // 然后只把自己打开。
    });
  });

관련 권장 사항:

BOOtstrap 소스 코드 분석 툴팁, popover_html/css_WEB-ITnose

Bootstrap은 매일 사용해야 합니다. 팝업 상자(Popover) 플러그인_javascript 기술을 알아보세요

BootStrap의 팝업 상자(Popover)는 팝업 레이어 위로 마우스 이동을 지원합니다. 창 레이어가 Hidden_javascript 기술이 아닙니다

위 내용은 BootStrap 사용자 정의 팝오버는 클릭 영역 숨기기 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!