div小弹窗样式

最新推荐文章于 2024-07-16 20:50:05 发布

图纸t

最新推荐文章于 2024-07-16 20:50:05 发布

阅读量1.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/asdfghjkl110292/article/details/101518961

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在这里插入图片描述
htmL

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Manager </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/scripts/vendor/bootstrap/css/bootstrap.min.css">
    <link href="../scripts/css/someapp.css" rel="stylesheet">
</head>
<body>
<div id="myPopover1b" class="popover popover-default shadow">
<nav class="navbar">
 </nav>
  <div>
       <p>
 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
     </p>
   </div>
   <div class="popover-footer">
    <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
       </div>
  </div>
      <!-- JavaScript files-->
    <script src="~/scripts/vendor/jquery/jquery-2.0.0.min.js"> </script>
    <script src="../scripts/vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

css

 .shadow{ 
   -webkit-box-shadow: #666 0px 0px 10px; 
   -moz-box-shadow: #666 0px 0px 10px; 
   box-shadow: #666 0px 0px 10px !important; 
} 
/*!
 * @copyright &copy; Kartik Visweswaran, Krajee.com, 2014 - 2017
 * @version 1.4.3
 *
 * Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.
 *
 * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com
 * For more Yii related demos visit http://demos.krajee.com
 */
.popover {
    padding: 0;
}

.popover-lg {
    min-width: 480px;
}

.popover-md {
    min-width: 350px;
}

.popover > .close {
    float: right;
    margin: 7px 9px 7px 7px;
}

.popover.top-right > .arrow, .popover.bottom-right > .arrow {
    left: 90%;
}

.popover.top-left > .arrow, .popover.bottom-left > .arrow {
    left: 10%;
}

.popover.left-top > .arrow, .popover.right-top > .arrow {
    top: 10%;
}

.popover.left-bottom > .arrow, .popover.right-bottom > .arrow {
    top: 90%;
}

.popover-default.bottom > .arrow:after {
    border-bottom-color: #f7f7f7;
}

.popover-primary.bottom > .arrow:after {
    border-bottom-color: #428bca;
}

.popover-success.bottom > .arrow:after {
    border-bottom-color: #dff0d8;
}

.popover-danger.bottom > .arrow:after {
    border-bottom-color: #f2dede;
}

.popover-warning.bottom > .arrow:after {
    border-bottom-color: #fcf8e3;
}

.popover-info.bottom > .arrow:after {
    border-bottom-color: #d9edf7;
}

.popover-default.left-top > .arrow:after {
    border-left-color: #f7f7f7;
}

.popover-default.right-top > .arrow:after {
    border-right-color: #f7f7f7;
}

.popover-primary.left-top > .arrow:after {
    border-left-color: #428bca;
}

.popover-primary.right-top > .arrow:after {
    border-right-color: #428bca;
}

.popover-success.left-top > .arrow:after {
    border-left-color: #dff0d8;
}

.popover-success.right-top > .arrow:after {
    border-right-color: #dff0d8;
}

.popover-danger.left-top > .arrow:after {
    border-left-color: #f2dede;
}

.popover-danger.right-top > .arrow:after {
    border-right-color: #f2dede;
}

.popover-warning.left-top > .arrow:after {
    border-left-color: #fcf8e3;
}

.popover-warning.right-top > .arrow:after {
    border-right-color: #fcf8e3;
}

.popover-info.left-top > .arrow:after {
    border-left-color: #d9edf7;
}

.popover-info.right-top > .arrow:after {
    border-right-color: #d9edf7;
}

.popover-default > .popover-title {
    color: #333;
    background-color: #f7f7f7;
}

.popover-primary > .popover-title {
    color: #fff;
    background-color: #428bca;
    border: 2px solid #428bca;
}

.popover-success > .popover-title {
    color: #3c763d;
    background-color: #dff0d8;
    border-bottom: 1px solid #d6e9c6;
}

.popover-info > .popover-title {
    color: #31708f;
    background-color: #d9edf7;
    border-bottom: 1px solid #bce8f1;
}

.popover-warning > .popover-title {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-bottom: 1px solid #faebcc;
}

.popover-danger > .popover-title {
    color: #a94442;
    background-color: #f2dede;
    border-bottom: 1px solid #ebccd1;
}

.popover-footer {
    padding: 4px;
    background-color: #fbfbfb;
    text-align: right;
    border-top: 1px solid #ebebeb;
    border-radius: 0 0 5px 5px;
}

.popover-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 4px;
}

.popover-footer .btn-group .btn + .btn {
    margin-left: -1px;
}

.popover-footer .btn-block + .btn-block {
    margin-left: 0;
}

.popover.has-footer.top > .arrow:after, .has-footer.popover.top > .arrow:after {
    border-top-color: #fbfbfb;
}

.popover.has-footer.left-bottom > .arrow:after {
    border-top-color: transparent;
    border-left-color: #fbfbfb;
}

.popover.has-footer.right-bottom > .arrow:after {
    border-top-color: transparent;
    border-right-color: #fbfbfb;
}

.popover-loading {
    padding: 30px;
    background: url('../img/loading.gif') center center;
}

.popover-x-body.modal-open {
    overflow-y: auto;
}

 /* popover must be behind bootstrap navbar when scrolled */
.popover-x-body .navbar {
    z-index:1051;
}