[TOC] ## 依赖 jquery,bootcss.css,bootcss.js ``` <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> ``` ## demo ``` <a class="class-model" data-href="test.php" >Click me</a> <script> /** * 加载模态框 */ (function ($) { $.fn.bootModal = function (option) { var config = {isRoll: false}; var setConfig = $.extend(config, option); var style = setConfig.isRoll ? "" : "overflow:hidden;"; this.on("click", function () { var href = $(this).data("href"); $.get(href, function (res) { if (res === "") return false; var html = '<div id="modal" style="z-index:100;"><div class="modal fade" id="myModal" style="' + style + '">' + '<div class="modal-dialog">' + ' <div class="modal-content">' + res + ' </div>' + '</div>' + '</div></div>'; $('body').append(html) $("#myModal").modal(); }); }); }; })(jQuery); $(".class-model").bootModal({isRoll:false}) </script> ```