Bootstrap模拟对话框

最新推荐文章于 2020-03-26 18:58:07 发布

chiqu8683

最新推荐文章于 2020-03-26 18:58:07 发布

阅读量266

点赞数

原文链接：https://my.oschina.net/xiaocon/blog/199411

版权

怎样获得远程数据，这是一个很纠结的问题。

同事推荐了一个别的模拟对话框，但是最后我都没用。

还是想用原生的，结果就是这样了。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    <!-- bootstrap -->
    <link href="../css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="../css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    <link href="../css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- libraries -->

    <script src="jquery-latest.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap.datepicker.js"></script>
    <link href="../css/lib/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="../css/lib/font-awesome.css" type="text/css" rel="stylesheet" />
    <link href="../css/lib/morris.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="../css/layout.css">
    <link rel="stylesheet" type="text/css" href="../css/elements.css">
    <link rel="stylesheet" type="text/css" href="../css/icons.css">

    <!-- this page specific styles -->
    <link rel="stylesheet" href="../css/compiled/index.css" type="text/css" media="screen" />    

    <!-- open sans font -->
    <link href="../css/google-font.css" rel='stylesheet' type='text/css'>

    <!-- lato font -->
    <link href="../css/google-font2.css" rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->




</head>
<body>


<a data-toggle="modal" href="index.html" data-target="#myModal">Click me</a>


<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>