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

Question

У меня есть этот пример:

https://jsfiddle.net/s2duLtro/

КОД HTML:

<div><a href="#target-content" id="button">Apeleaza indicatii</a></div> 
<div id="target-content"> 
    <a href="#" class="close"></a> 
    <div id="target-inner"></div> 
</div> 

КОД CSS:

#target-content { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    pointer-events: none; 
    opacity: 0; 
    -webkit-transition: opacity 200ms; 
    transition: opacity 200ms; 
} 

#target-content:target { 
    pointer-events: all; 
    opacity: 1; 
} 

#target-content #target-inner { 
    position: absolute; 
    display: block; 
    padding: 159px; 
    line-height: 1.8; 
    width: 20%; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); 
    background: white; 
    color: #34495E; 
} 

#target-content #target-inner h2 { margin-top: 0; } 

#target-content #target-inner code { font-weight: bold; } 

#target-content a.close { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: #34495E; 
    opacity: 0.5; 
    -webkit-transition: opacity 200ms; 
    transition: opacity 200ms; 
} 

#target-content a.close:hover { opacity: 0.4; } 

Это окно загружается только тогда, когда пользователь нажимает на текст.

Я хочу, чтобы это окно отображалось первым, когда страница загружается. Как это сделать? Требуется JQuery?

Заранее благодарен!

Answer 1

Все, что вам нужно сделать, это установить CSS Непрозрачность 1 и да, вы будете нуждаться jQuery справиться с этой

#target-content { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    pointer-events: none; 
    opacity: 1;  //SET OPACITY to 1 
    -webkit-transition: opacity 200ms; 
    transition: opacity 200ms; 
} 

Отъезд Fiddle Link

Answer 2

Вы не можете целевой псевдо класса в JavaScript. Один обходной путь будет привязать событие щелчка к документу, отфильтровать цели события и переключить класс .target:

$(function() { 
 
    $(document).on('click', function (e) { 
 
     $('#target-content').toggleClass('target', e.target.id === "button"); 
 
    }); 
 
    $('#button').click(); 
 
})

#target-content { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    pointer-events: none; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 200ms; 
 
    transition: opacity 200ms; 
 
} 
 
#target-content.target { 
 
    pointer-events: all; 
 
    opacity: 1; 
 
} 
 
#target-content #target-inner { 
 
    position: absolute; 
 
    display: block; 
 
    padding: 159px; 
 
    line-height: 1.8; 
 
    width: 20%; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); 
 
    background: white; 
 
    color: #34495E; 
 
} 
 
#target-content #target-inner h2 { 
 
    margin-top: 0; 
 
} 
 
#target-content #target-inner code { 
 
    font-weight: bold; 
 
} 
 
#target-content a.close { 
 
    content:""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #34495E; 
 
    opacity: 0.5; 
 
    -webkit-transition: opacity 200ms; 
 
    transition: opacity 200ms; 
 
} 
 
#target-content a.close:hover { 
 
    opacity: 0.4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div><a href="#target-content" id="button">Apeleaza indicatii</a> 
 
</div> 
 
<div id="target-content"> <a href="#" class="close"></a>https://jsfiddle.net/s2duLtro/#collaborate 
 
    <div id="target-inner"></div> 
 
</div>

Answer 3

Вы можете изменить свой CSS использовать:

display: hidden; 

Вместо от:

opacity: 0; 

Затем вы можете использовать следующую JQuery, чтобы загрузить его, когда страница загружена:

$(document).ready(function() { 
    $('#target-content').fadeIn(200); 
}); 

Если вы используете «FadeIn (200)», то вы можете также избавиться от перехода в вашем CSS, а также.

Answer 4

Вы можете установить CSS на загрузку страницы с помощью jQuery. Добавьте следующий javascript на свою страницу

$(function(){ 
    $("#target-content").css("opacity", "1"); 
});