- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个自定义 CSS made Modal,我想将其放置在 Bootstrap 网站模板中。现在的问题是这个自定义的 Css Modal 不适合主题,Modal 的 css 代码会干扰 Bootstrap 类,结果将显示在这里:
我想将 Modal 转换为 Bootstrap 布局,以便它与我的 Bootstrap 主题完美对齐:
这里是工作模态的代码:
var popupdisplayed = false;
jQuery(function() {
//----- CLOSE
jQuery('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
jQuery('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
jQuery(document).ready(function () {
jQuery('.popup').show(0);
var halfbrowserHeight = jQuery(window).height() / 2;
jQuery(window).scroll(function () {
var distance = jQuery(window).scrollTop();
if (distance >= halfbrowserHeight && !popupdisplayed) {
jQuery('.popup').show(0);
popupdisplayed = true;
}
});
});
a {text-decoration:none;}
.popup-inner p a {
text-decoration:none;
color:#f8f341;
font-family: 'Yeon Sung', cursive;
}
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
font-family: 'Raleway', sans-serif;
}
/* Inner */
.popup-inner {
line-height: initial;
max-width:700px;
width:90%;
padding:0px;
position:absolute;
top:50%;
z-index:99;
text-align: left;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#40434c;
background-size:cover;
color:#000;
}
/* Close Button */
.popup-close {
width:30px;
height:30px;
padding:4px 2px 0px;
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:#1b1464;
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#FFF !important;
}
.mybtn {
width: calc(50% - 60px);
float: left;
display: inline-block;
background: #e42022;
color: #FFF;
text-align: center;
padding: 5px;
box-sizing: border-box;
margin: 10px 30px;
font-weight: bold;
}
.mybtn:hover{opacity: 0.9;}
.join{background: #1b1464;}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:red;
text-decoration:none;
}
.right3 ul {padding: 0px; margin: 0px;}
.right3 ul li {
background-image: url('https://s33.postimg.cc/502ku2hsv/correct_sign.png');
list-style: none;
padding-left:30px;
background-repeat: no-repeat;
background-position: left center;
background-size: 15px;
}
.code{ color:#23B14D; font-weight:700;}
.left3 {
width:40%;
padding:0 10px 0 0;
box-sizing:border-box;
min-height:2px;
float:left;
}
.right3 {
width: 60%;
padding: 0px;
box-sizing: border-box;
height: 310px;
float: left;
font-size: 17px;
}
.left3 img {
width:100%;
margin-top:0px;
}
.left3 {background:url('https://s33.postimg.cc/d5kms1ya7/player1.png') no-repeat center top / auto 100%; }
.right3 p { margin:0; }
.popup-inner {
display:flex;
/*background: rgba(228,32,34,0.7); */
background: #FFF;
border: 5px solid #e42022;
}
.preventclose {
position:fixed;
top:0;
width:100%;
height:5px; }
.left4{
width: 100%;
float: left;
padding:0px;
box-sizing: border-box;
}
.bbtitle {
font-family: 'Poppins', sans-serif;
color: #1b1464;
display: block;
font-weight: bold;
text-transform: capitalize;
font-size: 26px;
padding: 10px 10px 10px 0;
}
.right4 {
width: 100%;
float: left;
color:#FFF;
padding:0 10px;
box-sizing: border-box;
}
.popup-inner .left4 a {
font-size: 21px; font-weight: bold;
}
.popup-inner .right4 a {
font-size: 21px;
font-weight: bold;
}
.firstlink {
display: block;
padding: 13px 10px 10px;
background: none;
}
.endtext {
padding: 10px;
font-size: 13px;
color: #999;
font-weight: bold;
margin-top: 21px !important;
display: block;
float: left;
}
.dollar25 {
color:red;
font-weight: bolder;
}
.right3 p {
padding:5px;
margin-top: 18px;
font-size:14px;
text-align: justify;
}
.ifl-image{
width: 80px !important;
}
@media(max-width:767px) {
.left3 {width:30%;}
.right3 {
width:70%;
height: 360px;
padding:0 10px;
}
.popup-inner {
max-width:600px;
}
.left3 img {
width: 100%;
margin-top: 18px;
}
}
@media(max-width:550px) {
.popup-inner {display:block;}
.bbtitle {
text-align: center;
font-size: 22px;
}
.left3 {
width:100%;
height:200px;
background-size:cover;
background-position:center top;
}
.right3 {width:100%;}
.popup-inner {max-width:400px;}
.off {font-size:60px;}
.left3 img {
width: 200px;
margin-top: 18px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preventclose"></div>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<div class="left3">
<img src="http://intfl.com/themes/front//images/logo1.png" class="ifl-image">
</div>
<div class="right3">
<div class="bbtitle">International Football League</div>
<ul>
<li>Want to win $100K?</li>
<li>Want to win ownership of the IFL?</li>
<li>Want to help pick team names?</li>
<li>Want to help pick team logos?</li>
<li>Want to help pick players for teams </li>
<li>Want to help hire staff?</li>
<li>Want to help fire staff?</li>
</ul>
<div class="buttons123">
<a href="#" class="join mybtn">Join</a><a href="#" class="notnow mybtn">Not Now</a>
</div>
<p>Well there's no need to want anymore here's your chance. Just become a member of the International Football League for just <i class="dollar25">$25</i> to help call the shots.</p>
</div>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
我知道 CSS,但我对 Bootstrap 的类一无所知。任何帮助表示赞赏。提前致谢。
最佳答案
检查编辑过的片段 - 这就是您要查找的内容吗?我已经在头部添加了指向 bootstrap 4 css 和 js 的 CDN 链接,并根据 bootstarap documentation 中建议的示例对您的代码进行了一些编辑。
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="left3"></div>
<div class="right3"></div>
<a class="popup-close" data-dismiss="modal" href="#">x</a>
</div>
</div>
</div>
a {text-decoration:none;}
.popup-inner p a {
text-decoration:none;
color:#f8f341;
font-family: 'Yeon Sung', cursive;
}
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
font-family: 'Raleway', sans-serif;
}
/* Inner */
.popup-inner {
line-height: initial;
max-width:700px;
width:90%;
padding:0px;
position:absolute;
top:50%;
z-index:99;
text-align: left;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#40434c;
background-size:cover;
color:#000;
}
/* Close Button */
.popup-close {
width:30px;
height:30px;
padding:4px 2px 0px;
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:#1b1464;
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#FFF !important;
}
.mybtn {
width: calc(50% - 60px);
float: left;
display: inline-block;
background: #e42022;
color: #FFF;
text-align: center;
padding: 5px;
box-sizing: border-box;
margin: 10px 30px;
font-weight: bold;
}
.mybtn:hover{opacity: 0.9;}
.join{background: #1b1464;}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:red;
text-decoration:none;
}
.right3 ul {padding: 0px; margin: 0px;}
.right3 ul li {
background-image: url('https://s33.postimg.cc/502ku2hsv/correct_sign.png');
list-style: none;
padding-left:30px;
background-repeat: no-repeat;
background-position: left center;
background-size: 15px;
}
.code{ color:#23B14D; font-weight:700;}
.left3 {
width:40%;
padding:0 10px 0 0;
box-sizing:border-box;
min-height:2px;
float:left;
}
.right3 {
width: 60%;
padding: 0px;
box-sizing: border-box;
height: 310px;
float: left;
font-size: 17px;
}
.left3 img {
width:100%;
margin-top:0px;
}
.left3 {background:url('https://s33.postimg.cc/d5kms1ya7/player1.png') no-repeat center top / auto 100%; }
.right3 p { margin:0; }
.popup-inner {
display:flex;
/*background: rgba(228,32,34,0.7); */
background: #FFF;
border: 5px solid #e42022;
}
.preventclose {
position:fixed;
top:0;
width:100%;
height:5px; }
.left4{
width: 100%;
float: left;
padding:0px;
box-sizing: border-box;
}
.bbtitle {
font-family: 'Poppins', sans-serif;
color: #1b1464;
display: block;
font-weight: bold;
text-transform: capitalize;
font-size: 26px;
padding: 10px 10px 10px 0;
}
.right4 {
width: 100%;
float: left;
color:#FFF;
padding:0 10px;
box-sizing: border-box;
}
.popup-inner .left4 a {
font-size: 21px; font-weight: bold;
}
.popup-inner .right4 a {
font-size: 21px;
font-weight: bold;
}
.firstlink {
display: block;
padding: 13px 10px 10px;
background: none;
}
.endtext {
padding: 10px;
font-size: 13px;
color: #999;
font-weight: bold;
margin-top: 21px !important;
display: block;
float: left;
}
.dollar25 {
color:red;
font-weight: bolder;
}
.right3 p {
padding:5px;
margin-top: 18px;
font-size:14px;
text-align: justify;
}
.ifl-image{
width: 80px !important;
}
@media(max-width:767px) {
.left3 {width:30%;}
.right3 {
width:70%;
height: 360px;
padding:0 10px;
}
.popup-inner {
max-width:600px;
}
.left3 img {
width: 100%;
margin-top: 18px;
}
}
@media(max-width:550px) {
.popup-inner {display:block;}
.bbtitle {
text-align: center;
font-size: 22px;
}
.left3 {
width:100%;
height:200px;
background-size:cover;
background-position:center top;
}
.right3 {width:100%;}
.popup-inner {max-width:400px;}
.off {font-size:60px;}
.left3 img {
width: 200px;
margin-top: 18px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preventclose"></div>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="left3">
<img src="http://intfl.com/themes/front//images/logo1.png" class="ifl-image">
</div>
<div class="right3">
<div class="bbtitle">International Football League</div>
<ul>
<li>Want to win $100K?</li>
<li>Want to win ownership of the IFL?</li>
<li>Want to help pick team names?</li>
<li>Want to help pick team logos?</li>
<li>Want to help pick players for teams </li>
<li>Want to help hire staff?</li>
<li>Want to help fire staff?</li>
</ul>
<div class="buttons123">
<a href="#" class="join mybtn">Join</a><a href="#" class="notnow mybtn">Not Now</a>
</div>
<p>Well there's no need to want anymore here's your chance. Just become a member of the International Football League for just <i class="dollar25">$25</i> to help call the shots.</p>
</div>
<a class="popup-close" data-dismiss="modal" href="#">x</a>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
关于jquery - 如何将自定义 CSS Modal 转换为 Bootstrap Modal?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50864726/
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗? 最佳答案 在 CSS 框架的上下文中,Bootstrap 和 Twitter B
什么是 Bootstrap 文档中的屏幕阅读器??? >>> bootstrap document 不知道什么是屏幕阅读器? 最佳答案 它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具;它会向
我想更新网站上的 Bootstrap,但我不知道安装的版本。 如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本? CSS 文件中没有版
很抱歉问了这么一个愚蠢的问题,但我真的不清楚这些。 Bootstrap 是一个非常棒的库,它节省了开发人员的大量工作。 因为它提供了很多功能,比如 节省大量时间。 响应式功能。 一致的设计。 便于使用
我正在使用 ng2-bootstrap对于 Angular 2 项目。 这个包同时支持Bootstrap 3和4,我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。 如何从 Boo
我计划在我的项目中使用 Bootstrap 4 和 angular 4,但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
单击删除按钮后,我设置了警报。 但它的默认高度更大,我想让它更小(高度)。 我试过 display-4 属性(property),但它没有工作。 我已通过 w-50 将宽度设置为屏幕的一半,但警报的一
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap 中的“bootstrap”一词是什么意思?在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义,但无法得出结论。那么有人可以在这种情况下给出“Bo
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS,我想知道是否仍然建议使用 Bootstrap-Vue,不管 Bootstrap-Vue 还不支持 Bootst
我正在使用 codeigniter 框架,我正在使用 bootstrap typeahead,一切都很好,但我的问题是当我将它放在 bootstrap 模式中时,bootstrap typeahead
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。 这是我的 body 标签: 这是我的标签 HTML: Home Profile
如果您选择使用 Bootstrap-Xtra,您是否应该也包括原始的 bootstrap.css,或者 bootstrap-xtra.css 应该是一个完整的替代品。 例如,bootstrap-xtr
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap,两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
我正在使用 Bootstrap 3 RC,默认按钮是带有黑色文本的深灰色,而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个?这可能
在我的一个项目中,我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
下拉菜单在 Angular-UI-Bootstrap 中不起作用?使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了?
如何在 Bootstrap Table 中添加 Bootstrap 按钮 最佳答案 我已经想出了解决办法。我想和大家分享。 这是我的 table : # Visit
我是一名优秀的程序员,十分优秀!