Можно ли отображать кнопку Bootstrap на кнопке при нажатии на другую кнопку?

Я пытаюсь найти способ отображения popovers вручную вместо щелчка элемента.Можно ли отображать кнопку Bootstrap на кнопке при нажатии на другую кнопку?

Ниже приведен фрагмент кода, который показывает две кнопки.

Щелкните мышью по изображению по щелчку. (этого не должно быть)
show click me popover: это предположительно, чтобы показать походку click me.

Коротко: Показано поповер на button1 по щелчку button2, но не показывают поповер при button1 нажатии

$(document).ready(function() { 
 
    $('[data-toggle="popover"]').popover({ 
 
    placement: 'top', 
 
    html: true, 
 
    title: function() { 
 
     return 'User Info: ' + $(this).data('title') + ' <a href="#" class="close" data-dismiss="alert">×</a>' 
 
    }, 
 
    content: function() { 
 
     return '<div class="media"><a href="#" class="pull-left"><img src=".." class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>' 
 
    } 
 
    }); 
 
}); 
 

 

 
$(document).ready(function() { 
 
    $(document).on("click", ".popover .close", function() { 
 
    $(this).parents(".popover").popover('hide'); 
 
    }); 
 
});

.bs-example { 
 
    margin: 160px 10px 0; 
 
} 
 
.popover-title .close { 
 
    position: relative; 
 
    bottom: 3px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div class="bs-example"> 
 
    <button type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" data-toggle="popover" onclick="">Click Me</button> 
 

 
    <button>show click me popover</button> 
 
    </div> 
 
</body>

источник

2016-03-10 Vikas Bansal

Я думаю, что вы можете использовать JQuery триггер() метод для вызова события нажатия первой кнопки от второй кнопки –

@ZigmaEmpire поповер не должен быть показан на 'btn1' нажмите. Попутчик должен отображаться только при нажатии кнопки «btn2». –

Я немного смущен. Вы хотите всплывать на кнопке «Показать клик ...», а не «кликнуть меня». Правильно? Если да, то почему вы написали 'data-toggle =" popover "' на этой кнопке? – Rajesh

Согласно mmgross ответ, но сделать руководство по запуску должно работать.

$(document).ready(function() { 
 
    $('#popoverbtn').popover({ 
 
    trigger: 'manual', 
 
    placement: 'top', 
 
    html: true, 
 
    title: function() { 
 
     return 'User Info: ' + $(this).data('title') + ' <a href="#" class="close" data-dismiss="alert">×</a>' 
 
    }, 
 
    content: function() { 
 
     return '<div class="media"><a href="#" class="pull-left"><img src=".." class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>' 
 
    } 
 
    }); 
 
}); 
 

 

 
$(document).ready(function() { 
 
    $(document).on("click", ".popover .close", function() { 
 
    $(this).parents(".popover").popover('hide'); 
 
    }); 
 
});

.bs-example { 
 
    margin: 160px 10px 0; 
 
} 
 
.popover-title .close { 
 
    position: relative; 
 
    bottom: 3px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div class="bs-example"> 
 
    <button type="button" id="popoverbtn" data-title="Student" data-name="vikas bansal" class="btn btn-primary">Click Me</button> 
 

 
    <button type="button"class="btn btn-primary"onclick="$('#popoverbtn').popover('toggle');">show click me popover</button> 
 
    </div> 
 
</body>

источник

2016-03-10 08:37:47

Удалил мой ответ, это намного лучше. Я полностью забыл о триггере: «manual» – mmgross

Вы можете вызвать поповер с помощью $(elementSelector).popover('show').

Вы можете использовать trigger:'manual', и это решает проблему открытия popover на click me. Кредиты @Paul French

Кроме того, я переформатировал ваш код. Его не хорошо, чтобы иметь больше чем один $(document).ready()

$(document).ready(function() { 
 
    registerPopover(); 
 
    registerEvents(); 
 
}); 
 

 
function registerEvents() { 
 
    $(document).on("click", ".popover .close", function() { 
 
    $("#btn1").popover('hide'); 
 
    }); 
 

 
    $("#btn2").on("click", function() { 
 
    $("#btn1").popover('show'); 
 
    }) 
 
} 
 

 
function registerPopover() { 
 
    var contentHTML = '<div class="media">' + 
 
    '<a href="#" class="pull-left">' + 
 
    '<img src=".." class="media-object" alt="Sample Image">' + 
 
    '</a>' + 
 
    '<div class="media-body">' + 
 
    '<h4 class="media-heading">' + $("#btn1").data('name') + '</h4>' + 
 
    '<p>Excellent Bootstrap popover! I really love it.</p>' + 
 
    '</div></div>'; 
 
    var titleHTML = 'User Info: ' + 
 
    $(this).data('title') + 
 
    ' <a href="#" class="close" data-dismiss="alert">×</a>' 
 

 
    $("#btn1").popover({ 
 
    placement: 'top', 
 
    html: true, 
 
    trigger: 'manual', 
 
    title: titleHTML, 
 
    content: contentHTML 
 
    }) 
 
}

.bs-example { 
 
    margin: 160px 10px 0; 
 
} 
 
.popover-title .close { 
 
    position: relative; 
 
    bottom: 3px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div class="bs-example"> 
 
    <button id="btn1" type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" onclick="">Click Me</button> 
 
    <button id="btn2">show click me popover</button> 
 
    </div> 
 
</body>

источник

2016-03-10 08:41:53 Rajesh

Можно ли отображать кнопку Bootstrap на кнопке при нажатии на другую кнопку?

ответ

Смежные вопросы