Question

我在css中非常穷。在我的项目中我需要一个弹出窗口。这就是为什么我在网上搜索并找到/知道bootstrap模态。并尝试使用它。但我面临问题。 stackoverflow中已经存在很多问题。但是我的问题是不同的。为什么我要再问一次？

问题=＆GT;

在框上方看起来正在出现。并且在没有我的指示的情况下再次离开/没有任何东西。

my html =＆gt;

<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>

<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog"  aria-labelledby="modalLabel" 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">×</span><span class="sr-only">Close</span></button>
            <h3 class="modal-title" id="lineModalLabel">My Modal</h3>
        </div>
        <div class="modal-body">

            <!-- content goes here -->
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
        <div class="modal-footer">
            <div class="btn-group btn-group-justified" role="group" aria-label="group button">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
                </div>
                <div class="btn-group btn-delete hidden" role="group">
                    <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

和我的css =＆gt;

<style type="text/css">
.center {
    margin-top: 50px;
}

.modal-header {
    padding-bottom: 5px;
}

.modal-footer {
    padding: 0;
}

    .modal-footer .btn-group button {
        height: 40px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border: none;
        border-right: 1px solid #ddd;
    }

    .modal-footer .btn-group:last-child > button {
        border-right: 0;
    }
 </style>

和我的头部分=＆gt;

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/Content/img/tsms/financial-literacy.gif" sizes="32x32">
<title>
    AdminTSMS
</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/select2.css" rel="stylesheet"/>
<link href="/Content/css/datepicker3.css" rel="stylesheet"/>
<link href="/Content/css/AdminLTE.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<link href="/Content/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/css/icheck/blue.min.css" rel="stylesheet"/>
<link href="/Content/Custom_Admin.css" rel="stylesheet"/>
<link href="/Content/css/skins/skin-blue.css" rel="stylesheet"/>
<link href="/Content/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<script src="/Content/js/plugins/jquery/jquery-2.2.4.js"></script>
<script src="/Content/js/plugins/bootstrap/bootstrap.js"></script>
<script src="/Content/js/plugins/fastclick/fastclick.js"></script>
<script src="/Content/js/plugins/slimscroll/jquery.slimscroll.js"></script>
<script src="/Content/js/plugins/select2/select2.full.js"></script>
<script src="/Content/js/plugins/moment/moment.js"></script>
<script src="/Content/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/Content/js/plugins/icheck/icheck.js"></script>
<script src="/Content/js/plugins/inputmask/jquery.inputmask.bundle.js"></script>
<script src="/Content/js/app.js"></script>
<script src="/Content/js/init.js"></script>

<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/Custom_Login.js"></script>
<script src="/Scripts/MyCustomFile.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.fr.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />


<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

我正在研究一个项目，这就是为什么有很多不必要的员工。为了更好地理解我给你我的完整项目主管部分。因为我认为头部分/链接是问题的原因之一.css /引导专家？请帮帮我。

Answer 1

请试试这个：

.center {
    margin-top: 50px;
}

.modal-header {
    padding-bottom: 5px;
}

.modal-footer {
    padding: 0;
}

    .modal-footer .btn-group button {
        height: 40px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border: none;
        border-right: 1px solid #ddd;
    }

    .modal-footer .btn-group:last-child > button {
        border-right: 0;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>

<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog"  aria-labelledby="modalLabel" 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">×</span><span class="sr-only">Close</span></button>
            <h3 class="modal-title" id="lineModalLabel">My Modal</h3>
        </div>
        <div class="modal-body">

            <!-- content goes here -->
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
        <div class="modal-footer">
            <div class="btn-group btn-group-justified" role="group" aria-label="group button">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
                </div>
                <div class="btn-group btn-delete hidden" role="group">
                    <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

bootstrap模态不起作用？

1 个答案: