我正在尝试一个函数,如果在div中选择了文本,则弹出框应与弹出框内的表单元素一起显示。但是我完成了文本选择,但是无法获得Bootstrap Popover。在下面,我添加了为结果尝试的代码。预先感谢!
function getSelected() {
if (window.getSelection) {
return window.getSelection();
}
else if (document.getSelection) {
return document.getSelection();
}
else {
var selection = document.selection && document.selection.createRange();
if (selection.text) {
return selection.text;
}
return false;
}
return false;
}
$('.container').mouseup(function() {
var selection = getSelected();
if (selection) {
$(selection).popover({
placement: 'auto',
html:true,
content: $('#string-editor-pop').html()
}).on('click', function(){
// had to put it within the on click action so it grabs the correct info on submit
$('#string-picker').colorpicker();
$('.selectpicker').selectpicker();
$(".input-url a").on("click",function(){
$(".input-url").css("display","none");
$(".string-editor-tooltip li").css("display","flex");
});
$(".string-link a").on("click",function(){
$(".input-url").css("display","block");
$(".string-editor-tooltip li").css("display","none");
});
});
}
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.js"></script>
<div class="container">
<p>This is my content </p>
</div>
<div id="string-editor-pop" class="hide">
<ul class="string-editor-tooltip">
<li class="string-edit-fonts">
<select class="selectpicker wsb-select">
<option>8</option>
<option>10</option>
<option>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option>20</option>
<option>22</option>
<option>24</option>
<option>26</option>
</select>
</li>
</ul>
</div>