问答详情
源自:8-7 模态弹出框--触发模态弹出窗2种方法

请问为什么点击没有效果

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>模态弹出窗的使用</title>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>

<body>

<!--下面是代码任务部分-->


<!-- href触发模态弹出窗元素 -->

<a class="btn btn-primary" data-toggle="modal" href="#mymodal-link">通过链接href属性触发</a>

<!-- 模态弹出窗内容 -->

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link">

    <div class="modal-dialog">

    <div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

<h4 class="modal-title">模态弹出窗标题</h4>

</div>

<div class="modal-body">

<p>模态弹出窗主体内容</p>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

<button type="button" class="btn btn-primary">保存</button>

</div>

</div>

</div>

</div>


<!-- data-target触发模态弹出窗元素 -->

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#mymodal-data">通过data-target触发</button>

<!-- 模态弹出窗内容 -->

<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

<h4 class="modal-title">模态弹出窗标题</h4>

</div>

<div class="modal-body">

<p>模态弹出窗主体内容</p>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

<button type="button" class="btn btn-primary">保存</button>

</div>

</div>

</div>

</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

</html>


提问者:慕侠0285453 2018-05-30 22:04

个回答

  • 慕侠0285453
    2018-05-30 22:07:34

    script的地址有问题,改成下面这个就行了

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>