Bootstrap实现带动画过渡的弹出框

前端技术 2023/09/02 JavaScript

先看看效果图：

代码：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset=\"utf-8\">
  <title>带动画过的渡弹出框</title>
  <link rel=\"stylesheet\" href=\"http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css\">
  <!--css样式-->
  <style >
    body{margin:30px;padding:30px;}
  </style>
</head>
<body>

<button class=\"btn btn-primary\" type=\"button\">点击我</button>
<div class=\"modal fade\" id=\"mymodal\">
  <div class=\"modal-dialog\">
    <div class=\"modal-content\">
      <div class=\"modal-header\">
        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">
          <span aria-hidden=\"true\">×</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 放置在文档的结尾，使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.min.js\"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js\"></script> 
<script>
  $(function(){
    $(\".btn\").click(function(){
      $(\"#mymodal\").modal(\"toggle\");
    });
  });
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/4625

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案