Auto load CSS code, when site is open

Question

this is HTML code:

<div class="box">
    <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Here i am</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
            Thank to pop me out of that button, but now i'm done so you can close this window.
        </div>
    </div>
</div>

I want when open the page, box(popup) auto load and delete button.

Answer 1

You need to learn jQuery for these things. Have a look that this Document. https://jqueryui.com/dialog/

Answer 2

here is popup:

 jQuery(window).load(function(){ jQuery('#popup1').fadeIn(); }); jQuery('.close').click(function(){ jQuery('#popup1').fadeOut(); });

 #popup1{position:fixed;left:0;top:0;background:rgba(0,0,0,.5);z-index:1;width: 100%; height: 100%;display:none} .popup{position:fixed;width:200px;height:200px;left:0;right:0;top:0;bottom:0;margin:auto;background:#000;z-index:2;color:#fff} .close{position:absolute;top:0;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <a class="button" href="#popup1">Let me Pop up</a> </div> <div id="popup1" class="overlay"> <div class="popup"> <h2>Here i am</h2> <a class="close" href="#">&times;</a> <div class="content"> Thank to pop me out of that button, but now i'm done so you can close this window. </div> </div> </div>