부트스트랩에서 부동 창을 설정하는 방법

부트스트랩에서 부동 창을 설정하는 방법: 1. HTML 코드를 생성합니다. 2. 하이퍼링크를 정의하고 해당 페이지의 CSS와 js를 소개합니다. 3. 부동 창 효과를 얻기 위해 부트스트랩의 팝오버 플러그인을 사용합니다.

이 기사의 운영 환경: Windows 7 시스템, 부트랩 버전 3.3.7, DELL G3 컴퓨터

부트스트랩으로 부동 창을 설정하는 방법은 무엇입니까?

BootStrap을 사용하여 다음 효과를 얻으세요. 부동 창

저는 소셜 네트워킹 사이트를 자주 플레이합니다. 그림에 표시된 것과 같은 상황은 매우 일반적일 것입니다.

하이퍼링크에 마우스를 올려놓으면 몇 가지 정보가 포함된 부동 상자가 나타납니다. 계정에 대해.

저는 최근 비슷한 요구 사항과 관련된 프런트 엔드 작업을 하고 있었습니다. ——마우스를 가리키면 부동 상자가 나타납니다. 부동 상자는 몇 가지 특정 정보를 설명합니다. 사실 예전에 인터넷에서 한 기사를 참고한 적이 있는데 좀 너무 복잡하다는 생각이 들었어요. . 그리고 발견한 사실은 마법의 부트스트랩이 이 기능과 함께 제공된다는 것입니다.

그래서 bootstrap의 팝오버 플러그인을 사용했는데 효과가 꽤 좋았습니다. 꽤 간단하지만 기억해 두세요...

하이퍼링크를 정의하고, 해당 페이지에 필요한 CSS와 js가 반드시 도입되어야 한다는 점을 참고하세요.

Html 코드

<link href="css/bootstrap.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<a href="#" class="bind_hover_card" data-toggle="popover" data-placement="bottom" data-trigger="hover"><img class="commentAvatarImage" src="img/social_dribbble.png" /></a>

data-toggle="popover"属性则为该超链接绑定弹窗效果，data-placement="bottom"指定弹窗相对于超链接显示的位置，data-trigger="hover"가 핵심입니다. 일시 중지되도록 지정하면 트리거됩니다. 팝업 창이 나타납니다. .

부트스트랩 팝오버 플러그인에 대한 몇 가지 공통 속성은 다음과 같습니다.

옵션 이름 유형/기본값 데이터 속성 이름 설명

animation	boolean 기본값: true	data-animation	팝업에 CSS 페이드 전환 효과를 적용합니다.
html	boolean 기본값: false	data-html	팝업 상자에 HTML을 삽입합니다. false인 경우 jQuery의 텍스트 메서드를 사용하여 dom에 콘텐츠를 삽입합니다. XSS 공격이 우려된다면 텍스트를 사용하세요.
placement	string|function 기본값: top	data-placement	은 팝업 상자 위치 지정 방법을 지정합니다(예: 상단|하단|왼쪽|오른쪽|자동). auto로 지정하면 팝업 상자가 동적으로 조정됩니다. 예를 들어 배치가 "자동 왼쪽"인 경우 팝업은 가능하면 왼쪽에 표시되고, 상황이 허용하지 않는 경우에는 오른쪽에만 표시됩니다.
selector	string 기본값: false	data-selector	선택기가 제공되면 팝업 개체가 지정된 대상에 위임됩니다.
title	문자열 함수 |기본값: ''	data-title	title 속성을 지정하지 않으면 제목 옵션이 기본 제목 값이 됩니다.
trigger	string 기본값: 'hover focus'	data-trigger	팝업 실행 방법 정의: 클릭 | hover | manual. 각각 공백으로 구분된 여러 트리거를 전달할 수 있습니다.
delay	번호 개체 |默认值：0	data-delay	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay:{ show:500, hide:100}
container	string | false 默认值：false	data-container	向指定元素追加弹出框。 实例： container: 'body'

常见方法：

方法描述实例Options: .popover(options)向元素集合附加弹出框句柄。

$().popover(options)
Toggle: .popover('toggle')切换显示/隐藏元素的弹出框。
$('#element').popover('toggle')
Show: .popover('show')显示元素的弹出框。
$('#element').popover('show')
Hide: .popover('hide')隐藏元素的弹出框。
$('#element').popover('hide')
Destroy: .popover('destroy')隐藏并销毁元素的弹出框。
$('#element').popover('destroy')

好了，下面重点是Js部分。

$(function() { 
  $("[data-toggle='popover']").popover({ 
    html : true,  
    title: title(),  
    delay:{show:500, hide:1000}, 
    content: function() { 
     return content();  
    }  
  }); 
});

而我们来模拟下动态加载悬浮框的标题和内容：

//模拟动态加载标题(真实情况可能会跟后台进行ajax交互) 
function title() { 
  return '田喜碧Hebe(节制的人生)'; 
} 
 
//模拟动态加载内容(真实情况可能会跟后台进行ajax交互) 
function content() { 
  var data = $("<form><ul><li><span aria-hidden=&#39;true&#39; class=&#39;icon_globe&#39;></span> <font>粉丝数:</font>7389223</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_piechart&#39;></span> <font>关注:</font>265</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_search_alt&#39;></span> <font>微博:</font>645</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_pens_alt&#39;></span> <font>所在地:</font>台湾</li>" + 
       "<input id=&#39;btn&#39; type=&#39;button&#39; value=&#39;关注&#39; onclick=&#39;test()&#39;/></form>"); 
   
  return data; 
} 
//模拟悬浮框里面的按钮点击操作 
function test() { 
  alert(&#39;关注成功&#39;); 
}

查看效果：

推荐学习：《bootstrap使用教程》

위 내용은 부트스트랩에서 부동 창을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!