文本选择时出现自举弹出式窗口

时间:2018-07-24 05:12:35

标签: javascript jquery twitter-bootstrap-3

我正在尝试一个函数,如果在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>

0 个答案:

没有答案