부트 스트랩을 위해 팝 오버에 닫기 버튼을 삽입하는 방법
JS :
$(function(){
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button>',
content : 'test'
})
$('html').click(function() {
$('#close').popover('hide');
});
});
HTML :
<button type="button" id="example" class="btn btn-primary" ></button>
나는 당신의 코드가 당신의 팝업을 표시하지 않는다는 것을 작성하고 있습니다.
이 문제를 접한 사람이 있습니까?
마크 업을 올바르게 만들어야합니다.
<button type="button" id="example" class="btn btn-primary">example</button>
그런 다음 한 가지 방법은 요소 자체 내부에 close-handler를 연결하는 것입니다. 다음과 같이 작동합니다.
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>title</strong></span>'+
'<button type="button" id="close" class="close" onclick="$("#example").popover("hide");">×</button>',
content : 'test'
});
});
여러 팝 오버와 부트 스트랩 3에서 작동하는 것을 찾아야했습니다.
내가 한 일은 다음과 같습니다.
팝 오버 작업을하고 싶은 요소가 여러 개 있었기 때문에 ID를 사용하고 싶지 않았습니다.
마크 업은 다음과 같습니다.
<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>
팝 오버 내부의 저장 및 닫기 버튼에 대한 내용 :
var contentHtml = [
'<div>',
'<button class="btn btn-link cancel">Cancel</button>',
'<button class="btn btn-primary save">Save</button>',
'</div>'].join('\n');
3 개 버튼 모두에 대한 자바 스크립트 :
이 방법은 컨테이너가 본문에 첨부되지 않은 기본값 인 경우에 작동합니다.
$('.foo').popover({
title: 'Bar',
html: true,
content: contentHtml,
trigger: 'manual'
}).on('shown.bs.popover', function () {
var $popup = $(this);
$(this).next('.popover').find('button.cancel').click(function (e) {
$popup.popover('hide');
});
$(this).next('.popover').find('button.save').click(function (e) {
$popup.popover('hide');
});
});
용기가 '본체'에 부착 된 경우
그런 다음 aria-definedby를 사용하여 팝업을 찾아 숨 깁니다.
$('.foo').popover({
title: 'Bar',
html: true,
content: contentHtml,
container: 'body',
trigger: 'manual'
}).on('shown.bs.popover', function (eventShown) {
var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
$popup.find('button.cancel').click(function (e) {
$popup.popover('hide');
});
$popup.find('button.save').click(function (e) {
$popup.popover('hide');
});
});
다른 답변이 충분히 일반적이지 않거나 너무 복잡하다는 것을 알았습니다. 다음은 항상 작동해야하는 간단한 것입니다 (부트 스트랩 3의 경우).
$('[data-toggle="popover"]').each(function () {
var button = $(this);
button.popover().on('shown.bs.popover', function() {
button.data('bs.popover').tip().find('[data-dismiss="popover"]').on('click', function () {
button.popover('toggle');
});
});
});
그런 다음 data-dismiss="popover"닫기 버튼 에 속성 을 추가 하십시오. 또한 popover('hide')팝업을 숨기지 만 부트 스트랩 코드에서 내부 상태를 적절하게 설정하지 않아 다음에를 사용할 때 문제가 발생할 수 있으므로 코드의 다른 곳에서 사용 하지 마십시오 popover('toggle').
이전 예제에는 두 가지 주요 단점이 있습니다.
- '닫기'버튼은 어떤 식 으로든 참조 된 요소의 ID를 인식해야합니다.
- 닫기 버튼에 '클릭'리스너 인 'shown.bs.popover'이벤트를 추가해야합니다. 왜냐하면 '팝 오버'가 표시 될 때마다 이러한 청취자를 추가하기 때문입니다.
다음은 이러한 단점이없는 솔루션입니다.
기본적으로 'popover'요소는 DOM에서 참조 된 요소 바로 뒤에 삽입됩니다 (그런 다음 참조 된 요소와 팝 오버가 직계 형제 요소임을 알 수 있음). 따라서 '닫기'버튼을 클릭하면 가장 가까운 'div.popover'부모를 찾은 다음 해당 부모의 바로 앞 형제 요소를 찾을 수 있습니다.
'닫기 버튼'의 'onclick'핸들러에 다음 코드를 추가하면됩니다.
$(this).closest('div.popover').popover('hide');
예:
var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').popover(\'hide\');" type="button" class="close" aria-hidden="true">×</button>';
$loginForm.popover({
placement: 'auto left',
trigger: 'manual',
html: true,
title: 'Alert' + genericCloseBtnHtml,
content: 'invalid email and/or password'
});
다음은 내 프로젝트에서 방금 사용한 것입니다.
<a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true data-original-title="weclome to use the sql query" data-content="content">example</a>
$('#manualinputlabel').click(function(e) {
$('.popover-title').append('<button id="popovercloseid" type="button" class="close">×</button>');
$(this).popover();
});
$(document).click(function(e) {
if(e.target.id=="popovercloseid" )
{
$('#manualinputlabel').popover('hide');
}
});
언급 된 많은 코드 예제를 확인했으며 Chris의 접근 방식이 완벽하게 작동합니다. 작업 데모를 위해 여기에 코드를 추가했습니다.
Bootstrap 3.3.1로 테스트했지만 이전 버전에서는 테스트하지 않았습니다. 그러나 shown.bs.popover이벤트가 3.x로 도입 되었기 때문에 2.x에서는 작동하지 않습니다 .
$(function() {
var createPopover = function (item, title) {
var $pop = $(item);
$pop.popover({
placement: 'right',
title: ( title || ' ' ) + ' <a class="close" href="#">×</a>',
trigger: 'click',
html: true,
content: function () {
return $('#popup-content').html();
}
}).on('shown.bs.popover', function(e) {
//console.log('shown triggered');
// 'aria-describedby' is the id of the current popover
var current_popover = '#' + $(e.target).attr('aria-describedby');
var $cur_pop = $(current_popover);
$cur_pop.find('.close').click(function(){
//console.log('close triggered');
$pop.popover('hide');
});
$cur_pop.find('.OK').click(function(){
//console.log('OK triggered');
$pop.popover('hide');
});
});
return $pop;
};
// create popover
createPopover('#showPopover', 'Demo popover!');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button>
<div id="popup-content" class="hide">
<p>Simple popover with a close button.</p>
<button class="btn btn-primary OK">OK</button>
</div>트릭은 .data ( 'bs.popover'). tip ()으로 현재 Popover를 얻는 것입니다 .
$('#my_trigger').popover().on('shown.bs.popover', function() {
// Define elements
var current_trigger=$(this);
var current_popover=current_trigger.data('bs.popover').tip();
// Activate close button
current_popover.find('button.close').click(function() {
current_trigger.popover('hide');
});
});
답변을 업데이트하고 싶었습니다. Swashata Ghosh에 따르면 다음은 moi에서 작동하는 더 간단한 방법입니다.
HTML :
<button type="button" class="btn btn-primary example">Example</button>
JS :
$('.example').popover({
title: function() {
return 'Popup title' +
'<button class="close">×</button>';
},
content: 'Popup content',
trigger: 'hover',
html: true
});
$('.popover button.close').click(function() {
$(this).popover('toggle');
});
이것은 여러 팝 오버에서 작동하며 겹치는 팝 오버로 발생하는 Z- 색인 문제를 처리하기 위해 약간 큰 추가 JS를 추가했습니다.
http://jsfiddle.net/erik1337/fvE22/
자바 스크립트 :
var $elements = $('.my-popover');
$elements.each(function () {
var $element = $(this);
$element.popover({
html: true,
placement: 'top',
container: $('body'), // This is just so the btn-group doesn't get messed up... also makes sorting the z-index issue easier
content: $('#content').html()
});
$element.on('shown.bs.popover', function (e) {
var popover = $element.data('bs.popover');
if (typeof popover !== "undefined") {
var $tip = popover.tip();
zindex = $tip.css('z-index');
$tip.find('.close').bind('click', function () {
popover.hide();
});
$tip.mouseover(function (e) {
$tip.css('z-index', function () {
return zindex + 1;
});
})
.mouseout(function () {
$tip.css('z-index', function () {
return zindex;
});
});
}
});
});
HTML :
<div class="container-fluid">
<div class="well popover-demo col-md-12">
<div class="page-header">
<h3 class="page-title">Bootstrap 3.1.1 Popovers with a close button</h3>
</div>
<div class="btn-group">
<button type="button" data-title="Popover One" class="btn btn-primary my-popover">Click me!</button>
<button type="button" data-title="Popover Two" class="btn btn-primary my-popover">Click me!</button>
<button type="button" data-title="Popover Three (and the last one gets a really long title!)" class="btn btn-primary my-popover">Click me!</button>
</div>
</div>
</div>
<div id="content" class="hidden">
<button type="button" class="close">×</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS :
/* Make the well behave for the demo */
.popover-demo {
margin-top: 5em
}
/* Popover styles */
.popover .close {
position:absolute;
top: 8px;
right: 10px;
}
.popover-title {
padding-right: 30px;
}
나는 이것으로 어려움을 겪고 있으며 이것이 가장 간단한 방법 인 js의 3 줄입니다.
- 팝 오버 제목에 십자가 추가
- js 스 니펫을 사용하여 팝 오버를 표시하고 헤더를 클릭하여 닫습니다.
- 그것을 멋지게 만들기 위해 약간의 CSS를 사용하십시오.
$(document).ready(function() {
// This is to overwrite the boostrap default and show it allways
$('#myPopUp').popover('show');
// This is to destroy the popover when you click the title
$('.popover-title').click(function(){
$('#myPopUp').popover('destroy');
});
});@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
/* Just to align my example */
.btn {
margin: 90px auto;
margin-left: 90px;
}
/* Styles for header */
.popover-title {
border: 0;
background: transparent;
cursor: pointer;
display: inline-block;
float: right;
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="myPopUp" class="btn btn-success" data-toggle="popover" data-placement="top" data-title="×" data-content="lorem ipsum content">My div or button or something with popover</button>
이 시도:
$(function(){
$("#example")
.popover({
title : 'tile',
content : 'test'
})
.on('shown', function(e){
var popover = $(this).data('popover'),
$tip = popover.tip();
var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>')
.click(function(){
popover.hide();
});
$('.popover-title', $tip).append(close);
});
});
버튼을 마크 업 문자열로 추가하는 대신 jQuery 래핑 된 버튼이 있으면 훨씬 더 깔끔하게 바인딩 할 수 있기 때문에 훨씬 쉽습니다. 이것은 실제로 Bootstrap 코드에서 누락되었지만이 해결 방법은 저에게 효과적이며 실제로 원하는 경우 모든 팝 오버에 적용하도록 확장 할 수 있습니다.
$popover = $el.popover({
html: true
placement: 'left'
content: 'Do you want to a <b>review</b>? <a href="#" onclick="">Yes</a> <a href="#">No</a>'
trigger: 'manual'
container: $container // to contain the popup code
});
$popover.on('shown', function() {
$container.find('.popover-content a').click( function() {
$popover.popover('destroy')
});
});
$popover.popover('show')'
$(function(){
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>title!!</strong></span> <button type="button" id="close" class="close">×</button></span>',
content : 'test'
})
$(document).on('click', '#close', function (evente) {
$("#example").popover('hide');
});
$("#close").click(function(event) {
$("#example").popover('hide');
});
});
<button type="button" id="example" class="btn btn-primary" >click</button>
$('.tree span').each(function () {
var $popOverThis = $(this);
$popOverThis.popover({
trigger: 'click',
container: 'body',
placement: 'right',
title: $popOverThis.html() + '<button type="button" id="close" class="close" ">×</button>',
html: true,
content: $popOverThis.parent().children("div.chmurka").eq(0).html()
}).on('shown.bs.popover', function (e) {
var $element = $(this);
$("#close").click(function () {
$element.trigger("click");
});
});
});
요소 를 클릭 하고 팝업을 표시하면 다음으로 show.bs.popover 이벤트를 발생시킬 수 있습니다. 여기에서 팝업 을 닫기 위해 클릭을 트리거하는 요소 를 얻을 수 있습니다.
FWIW, 여기 제가 사용하고있는 일반적인 솔루션이 있습니다. 저는 Bootstrap 3을 사용하고 있지만 일반적인 접근 방식은 Bootstrap 2에서도 작동해야한다고 생각합니다.
이 솔루션은 팝 오버를 활성화하고 일반 JS 코드 블록을 사용하여 'rel = "popover"'태그로 식별되는 모든 팝 오버에 대해 '닫기'버튼을 추가합니다. rel = "popover"태그가 있어야한다는 (표준) 요구 사항 외에 페이지에 임의의 수의 팝 오버를 넣을 수 있으며 해당 ID를 알 필요가 없습니다. 사실 ID가 필요하지 않습니다. 조금도. 팝 오버의 제목 속성을 설정하려면 'data-title'HTML 태그 형식을 사용해야하며 data-html을 "true"로 설정해야합니다.
필자가 필요하다고 생각하는 트릭은 팝 오버 객체 ( "po_map")에 대한 참조의 색인화 된 맵을 작성하는 것입니다. 그런 다음 JQuery가 제공하는 색인 ( "p_list [ '+ index +']. popover (\ 'toggle \')")을 통해 팝 오버 객체를 참조하는 HTML을 통해 'onclick'핸들러를 추가 할 수 있습니다. 이렇게하면 JQuery에서 제공하는 고유 인덱스가있는 개체 자체에 대한 참조 맵이 있으므로 팝 오버 개체의 ID에 대해 걱정할 필요가 없습니다.
다음은 자바 스크립트입니다.
var po_map = new Object();
function enablePopovers() {
$("[rel='popover']").each(function(index) {
var po=$(this);
po_map[index]=po;
po.attr("data-title",po.attr("data-title")+
'<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map['+index+'].popover(\'toggle\')">×</button>');
po.popover({});
});
}
$(document).ready(function() { enablePopovers() });
이 솔루션을 사용하면 내 사이트의 모든 팝 오버에 닫기 버튼을 쉽게 넣을 수 있습니다.
아래 코드가 매우 유용하다는 것을 알았습니다 ( https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/ 에서 가져옴 ).
$('[data-toggle="popover"]').popover({
title: function(){
return $(this).data('title')+'<span class="close" style="margin-top: -5px">×</span>';
}
}).on('shown.bs.popover', function(e){
var popover = $(this);
$(this).parent().find('div.popover .close').on('click', function(e){
popover.popover('hide');
});
});
다음은 "치트"솔루션입니다.
그런 다음 CSS로 상자에 'X'를칩니다.
CSS :
.popover-header::after {
content: "X";
position: absolute;
top: 1ex;
right: 1ex;
}
JQUERY :
$('.popover-dismiss').popover({
trigger: 'focus'
});
HTML :
<a data-toggle="popover" data-trigger="focus" tabindex="0" title="Native Hawaiian or Other Pacific Islander" data-content="A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.">?</a>
기술적으로 말하면 누군가 "X"가 아닌 다른 것을 클릭하면이를 해제 할 수 있지만 적어도 내 시나리오에서는 문제가되지 않습니다.
마우스 오버시 고정, HTML :
<a href="javascript:;" data-toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Lorem Ipsum">...</a>
자바 스크립트 :
$('[data-toggle=popover]').hover(function(e) {
if( !$(".popover").is(':visible') ) {
var el = this;
$(el).popover('show');
$(".popover > h3").append('<span class="close icon icon-remove"></span>')
.find('.close').on('click', function(e) {
e.preventDefault();
$(el).popover('hide');
}
);
}
});
이것을 제목 팝 오버 생성자에 넣으십시오 ...
'<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text'
... 오른쪽 상단에 작은 빨간색 'x'버튼이 표시됩니다.
//$('[data-toggle=popover]').popover({title:that string here})
아직 약간 혼란 스러우신 분들을 위해 :
다음은 팝 오버를 표시 한 후 토글하고, 트리거하는 데 사용한 것과 동일한 버튼을 선택한 다음 .popover ( 'toggle')을 호출하는 방법입니다.
이 경우 팝 오버를 닫는 코드는 다음과 같습니다.
$ ( '# example'). popover ( 'toggle');
이에 대한 매우 간단한 해결책으로 다음을 수행했습니다.
1) 다음 CSS를 추가하십시오.
.sub_step_info .popover::after {
content:url('/images/cross.png');
position:absolute;
display:inline-block;
top:15px;
right:5px;
width:15px;
text-align:center;
cursor:pointer;
}
2) data-trigger="manual"팝 오버 트리거 요소에 설정
3) https://github.com/twbs/bootstrap/issues/16802 기반 :
$('[data-trigger="manual"]').click(function() {
$(this).popover('toggle');
}).blur(function() {
$(this).popover('hide');
});
이것은 팝 오버의 어느 곳에서나 클릭 할 수 있다는 기초를 사용하지만 십자가에 초점을 맞추면 당신이 추구하는 행동을 장려 할 것입니다.
저에게 이것은 팝 오버에 닫기 버튼을 추가하는 가장 간단한 솔루션입니다.
HTML :
<button type="button" id="popover" class="btn btn-primary" data-toggle="popover" title="POpover" data-html="true">
Show popover
</button>
<div id="popover-content" style="display:none">
<!--Your content-->
<button type="submit" class="btn btn-outline-primary" id="create_btn">Create</button>
<button type="button" class="btn btn-outline-primary" id="close_popover">Cancel</button>
</div>
자바 스크립트 :
document.addEventListener("click",function(e){
// Close the popover
if (e.target.id == "close_popover"){
$("[data-toggle=popover]").popover('hide');
}
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.popover-1.1.2.js"></script>
<script type="text/javascript">
$(function(){
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button></span>',
content : 'test'
})
$("#close").click(function(event) {
$("#example").popover('hide');
});
});
</script>
<button type="button" id="example" class="btn btn-primary" >click</button>
참고 URL : https://stackoverflow.com/questions/13413057/how-to-insert-close-button-in-popover-for-bootstrap
'Program Tip' 카테고리의 다른 글
| 웹 앱의 '선택'에서 iPhone이 확대되지 않도록 방지 (0) | 2020.10.25 |
|---|---|
| Facebook의 소셜 플러그인에 유동 폭을 설정할 수 있습니까? (0) | 2020.10.25 |
| 여러 열을 기반으로 중복 레코드를 제거 하시겠습니까? (0) | 2020.10.25 |
| 속성 이름을 문자열로 사용하여 속성별로 정렬하는 코드 (0) | 2020.10.25 |
| EditText가 대문자로 텍스트를 시작하도록 강제하는 방법은 무엇입니까? (0) | 2020.10.25 |