如何在加载页面时显示此模态弹出窗口

I have this sample:

我有这个样本：

CODE HTML:

代码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>

CODE CSS:

代码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; }

This window is loaded only when a user clicks on text.

仅当用户单击文本时才会加载此窗口。

I want this window to be displayed first, when the page loads. How do I do this? JQuery is required?

我希望在页面加载时首先显示此窗口。我该怎么做呢？需要JQuery吗？

Thanks in advance!

提前致谢！

4 个解决方案

#1

All you needed to do was to set the CSS Opacity to 1 and yes you will need jQuery to handle this

你需要做的就是将CSS Opacity设置为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;
}

Check out the Fiddle Link

查看小提琴链接

#2

You cannot target pseudo class in javascript. One workaround would be to bind click event to document, filter out event target and toggle a class .target:

你不能在javascript中定位伪类。一种解决方法是将click事件绑定到文档，过滤掉事件目标并切换类.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>

#3

You can change your CSS to use:

您可以更改要使用的CSS：

display: hidden;

Instead of:

代替：

opacity: 0;

Then you can use the following jQuery to load it when the page is loaded:

然后，您可以在加载页面时使用以下jQuery加载它：

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

If you use the 'fadeIn(200)', then you can also get rid of your transition in your CSS as well.

如果您使用'fadeIn（200）'，那么您也可以摆脱CSS中的过渡。

#4

You can set the CSS on page load with jQuery. Add the following javascript to your page

您可以使用jQuery在页面加载时设置CSS。将以下javascript添加到您的页面

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

#1