jQuery
【jQuery】任意の要素にバルーンチップを追加するjQuerymb.balloon
April 22, 2018

jquery.mb.balloonは任意の要素にバルーンチップを追加するためのjQueryプラグイン。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="inc/jquery.mb.balloon.js"></script> <script> $(function () { var isIframe=function(){var a=!1;try{self.location.href!=top.location.href&&(a=!0)}catch(b){a=!0}return a};if(!isIframe()){var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:50px;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");$("body").prepend(logo),$("#logo").fadeIn()} jQuery.balloon.init(); setTimeout(function(){ $("#balloon2").showBalloon(); },10); $(".opener").each(function(){ var el = $(this); el.showCode(el); }); }); function printOutHTML(el){ var html = el[0].outerHTML; html=html.replace(/</g,"<"); html=html.replace(/>/g,">"); return html; } function canClose(balloon) { var input = balloon.find("input"); if (input.val().length > 0) return confirm("Sure you want to close this balloon?"); else return true; } $.fn.showCode = function(el){ return this.each( function(){ var msg = ""; var data = el.data(); var c = 1; for(var x in data){ msg += "<b>data-" + x + "</b> = " + data[x]; msg += ", "; c++; } // var msg = el.data().toString(); // printOutHTML(el) var element = $("<div/>").append(msg).css({fontSize: "10px", marginTop:10}); $(this).append(element); } ) } </script>
<div id="balloon1" class="opener box" data-balloon= "To close me you've to click on the x" data-position="up" data-addclose="true" data-bgcolor="#f0f0f0" data-bordercolor="#999" data-textcolor="#333" style=""> <h3>click me</h3> (with overlay - custom color - close button) </div>