Мои данные-фон не работает

Question

Я просмотрел другие варианты с фоном данных, чтобы предотвратить закрытие модели при нажатии за пределами кнопки закрытия. Возможно, может быть, что я добавляю фон к неправильному фрагменту кода, но я надеялся, что вы сможете мне помочь в этом.

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>

Это, вероятно, легко исправить или что-то маленькое, что нужно добавить, но я не могу управлять, я был бы признателен за любую помощь

С уважением Франсуа

Answer 1

$(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>