文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将自定义CSS Modal转换为Bootstrap Modal？

问如何将自定义CSS Modal转换为Bootstrap Modal？
EN

Stack Overflow用户
提问于 2018-06-15 03:38:30
回答 1查看 243关注 0票数 0

我有一个自定义的CSS maded，我想放在bootstrap网站模板。现在的问题是，这个自定义的Css Modal不适合主题，而且Modal的css代码干扰了引导程序类，结果将是，如所示

​

我想把Modal转换成bootstrap布局，这样它就能与我的bootstrap主题完美地结合起来：

这是Modal看起来像的样子

​

bootstrap中的布局：

​

以下是工作模式的代码：：

​

代码语言：javascript
复制
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;
        }
    });
});
代码语言：javascript
复制
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;
    }
}
代码语言：javascript
复制
<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，但我对bootstraps的类一无所知。任何帮助都是非常感谢的。提前谢谢。

jquery
html
css
bootstrap-modal
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-15 05:15:40

检查编辑过的代码片段--这就是你要找的吗？我已经将CDN链接添加到bootstrap 4css和js的头部，并根据bootstarap documentation中的建议示例对代码进行了一些编辑

代码语言：javascript
复制
<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>

​

代码语言：javascript
复制
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;
    }
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50864726

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档