1.运行效果如图所示


2.实现代码如下

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>href触发模态弹出窗元素</title><!--最新版本的Bootstrap核心CSS文件--><linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u"crossorigin="anonymous"><!--可选的Bootstrap主题文件（一般不用引入）--><linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous"></head><body><!--href触发模态弹出窗元素--><aclass="btnbtn-primary"href="#mymodal-link"data-toggle="modal">通过链接href属性触发</a><!--模态弹出窗内容--><divclass="modal"tabindex="-1"role="dialog"aria-labelledby="myLargeModalLabel"aria-hidden="true"id="mymodal-link"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">&times;</span><spanclass="sr-only">Close</span></button><h5class="modal-title">模态弹出窗标题</h5></div><divclass="modal-body"><p>模态弹出窗主体内容</p></div><divclass="modal-footer"><buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btnbtn-primary">保存</button></div></div></div></div><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!--最新的Bootstrap核心JavaScript文件--><scriptsrc="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></body></html>