Закрыть popover при клике по нему или рядом.
Есть код (bootstrap 4 + jquery).
При двойном клике показывается popover. Нужно закрыть при клике в любом месте страницы или по popover. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <html lang="uk"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <style> .word2play { cursor: pointer; color: blue; } </style> </head> <body> <div class="container"> <div class="row"> <p>Boys <span data-toggle="popover" title="Нравиться" data-content="А он мне нравится, нравится, нравится..." class="word2play" id="like">like</span> cars.</p> </div> <div class="row"> <p>Boys <span data-toggle="popover" title="Любить" data-content="Любит / не любит..." class="word2play" id="love">love</span> girls.</p> </div> </div> <script> $(function() { var clicked = false; $('.word2play').click(function() { curId = $(this).attr("id"); if(!clicked){ clicked = setTimeout(function(){ clicked = null; },300); } else { clearTimeout(clicked); clicked = null; $("[data-toggle='popover']").popover('hide'); $("#" + curId).popover('show'); } e.preventDefault(); }); }); </script> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html> |
bootstrap popover
savsoft,
:-? <!DOCTYPE html> <html lang="uk"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <style> a.word2play { cursor: pointer; color: blue; } a.word2play:focus{ outline: none; } </style> </head> <body> <div class="container"> <div class="row" > <p>Boys <a tabindex="0" data-trigger="focus" data-toggle="popover" title="Нравиться" data-content="А он мне нравится, нравится, нравится..." class="word2play" id="like">like</a> cars.</p> </div> <div class="row"> <p>Boys <a tabindex="0" data-trigger="focus" data-toggle="popover" title="Любить" data-content="Любит / не любит..." class="word2play" id="love">love</a> girls.</p> </div> </div> <script> $(function() { $('[data-toggle="popover"]').popover(); }); </script> </body> </html> |
Спасибо!
|
Часовой пояс GMT +3, время: 04:21. |