Question

我有一个自定义的CSS maded Modal，我想把它放在bootstrap网站模板中。现在的问题是这个自定义Css Modal不适合主题，而Modal的css代码会干扰bootstrap类，结果将显示：

我想将Modal转换为引导程序布局，以便它与我的引导主题完美对齐：

这就是Modal的样子：

寻找引导程序的布局：

以下是工作模式的代码：

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，但我不了解bootstraps的类。任何帮助表示赞赏。在此先感谢。

Answer 1

检查已修改的代码段 - 您正在寻找的是什么？我已经添加了CDN链接到bootstrap 4 css和js到头部，并根据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>

如何将自定义CSS模式转换为Bootstrap模式？

1 个答案: