我的数据背景不起作用

我已经查看了数据背景的其他选项，以防止在关闭按钮之外单击时模型关闭。也许可能是我将背景添加到了错误的代码片段中，但我希望你能帮助我解决这个问题。我的数据背景不起作用

function onClick(element) { 
 
    document.getElementById("img01").src = element.src; 
 
    document.getElementById("modal01").style.display = "block"; 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1670; 
 
    /* Sit on top */ 
 
    padding-top: 100px; 
 
    /* Location of the box */ 
 
    padding-bottom: 20px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    overflow: scroll; 
 
    /* Enable scroll if needed */ 
 
    overflow-x: hidden; 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.9); 
 
    /* Black w/ opacity */ 
 
} 
 
/* home page special button Content */ 
 

 
.special-content { 
 
    width: 80%; 
 
    height: auto; 
 
    background-color: #CCCCCC; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    border-radius: 10px; 
 
    display: block; 
 
} 
 
/* The Close Button */ 
 

 
.close { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    transition: 0.3s; 
 
} 
 
.close:hover, 
 
.close:focus { 
 
    color: #755378; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<a class="Star-btn" href="#" style="text-decoration:none;" onclick="onClick(this)">Specials</a> 
 

 
<div id="modal01" class="modal" onclick="this.style.display='none'" data-backdrop="static" data-keyboard="false"> 
 

 
    <span class="close">&times;</span> 
 
    <div class="special-content"> 
 
    <p id="img01" class="TextHome" alt="">random inforomation.</p> 
 
    </div> 
 

 
</div>

它可能是一个简单的办法或小东西需要加入，但我似乎无法进行管理，我希望得到任何帮助

问候弗朗索瓦

来源

2016-09-22 Frana

简单地从'＃model01'中删除onclick处理程序并将其放入'.close'中。然后调用一个单独的关闭函数或者去'parentElement'然后隐藏它。 – Werner

$(document).ready(function(){ 
 
    $(".Star-btn").click(function(){ 
 
     $("#modal01").css({"display":"block"}); 
 
    }); 
 
    $(".close").click(function(){ 
 
     $("#modal01").css({"display":"none"}); 
 
    }); 
 

 
});

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1670; 
 
    /* Sit on top */ 
 
    padding-top: 100px; 
 
    /* Location of the box */ 
 
    padding-bottom: 20px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    overflow: scroll; 
 
    /* Enable scroll if needed */ 
 
    overflow-x: hidden; 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.9); 
 
    /* Black w/ opacity */ 
 
} 
 
/* home page special button Content */ 
 

 
.special-content { 
 
    width: 80%; 
 
    height: auto; 
 
    background-color: #CCCCCC; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    border-radius: 10px; 
 
    display: block; 
 
} 
 
/* The Close Button */ 
 

 
.close { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    transition: 0.3s; 
 
} 
 
.close:hover, 
 
.close:focus { 
 
    color: #755378; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a class="Star-btn" href="#" style="text-decoration:none;">Specials</a> 
 

 
<div id="modal01" class="modal"> 
 

 
    <span class="close">&times;</span> 
 
    <div class="special-content"> 
 
    <p id="img01" class="TextHome" alt="">random inforomation.</p> 
 
    </div> 
 

 
</div>

来源

2016-09-22 08:39:16

我的数据背景不起作用

回答

相关问题