Help! (Open new "page" function in HTML)

Hello friends,

This is my website: yuzon.com

When I click on the icons, in the "10 BAŞLIK" section, for example, a new window-like thing opens (it's not exactly a new page, I don't know what it is called).

I want to make that when I click the "FELSEFEMIZ" button in "YUZON NEDIR?" section, the same kind of page opens. Where is that function in the code? Or is it not so easy?


"NEW PAGE OPEN" FUNCTION is somwhere here:

<li class="col-md-2 col-half-offset col-sm-6 mb-50">
                                        <div class="single-service single-service-ranimalfriends">
                                            <span><img src="./resources/images/10cm_normal_ouranimalfriends.png" width="90px" height="90px"/></span>
                                            <h4 class="service-title">Sokak hayvanları</h4>
                                            <p>At vero eos et accusa mus odio in dignissimos ducimus qui anditiis the tatum</p>

                                            <!-- from responsive-->
                                            <div class="single-item-content">
                                                <div class="portfolio-social-icon">
                                                    <!-- <a class="view-btn" href="#"><i class="fa fa-search-plus"></i></a> -->
                                                </div>

                                                <div class="portfolio-detail">
                                                  <a href="#" class="modal-close-btn"><span class="fa fa-times"></span></a>

                                                  <div class="clearfix">
                                                    <h2>Project Title</h2>
                                                    <img src="resources/images/pb3.jpg" alt="img-3" class="pull-right">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum nec ipsum vel malesuada. Maecenas ac congue et cursus tortor lectus ut nibh. Etiam malesuada vehicula elit venenatis vehicula. Ut bibendum libero eget eros pulvinar, in efficitur mi imperdiet. Etiam ut velit dui. Integer eget lacus eu turpis ornare interdum. Donec ut nisl sem. Aenean scelerisque sagittis eros, vel gravida felis posuere et.
                                                    </p>
                                                  </div>
                                                </div>
                                              </div>
                                                <!-- to responsive-->

                                        </div>
                                    </li>

HTML:

AND THIS IS THE "YUZON NEDIR" SECTION CODE. --> Where do I add the above code?

<!-- Start about section -->
        <section id="about">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="about-area">
                            <div class="row">
                                <div class="col-md-5 col-sm-6 col-xs-12">
                                    <div class="about-left wow fadeInLeft">
                                        <img src="resources/images/ab-img.jpg" alt="img">
                                    </div>
                                </div>
                                <div class="col-md-7 col-sm-6 col-xs-12">
                                    <div class="about-right wow fadeInRight">
                                        <div class="title-area">
                                            <h2 class="tittle"><span>YUZON</span> HAKKINDA </h2>
                                            <span class="tittle-line"></span>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus turpis eu erat fermentum, eget posuere tellus elementum. Fusce quam nibh, luctus eget sem vel, porttitor maximus neque.</p>

                                            <p>Proin ut libero purus. Sed sem ex, mattis nec aliquam ut, tincidunt sagittis justo. Nunc consequat faucibus ipsum, eu ultrices mauris molestie vel. Proin tristique purus ante, at tempus odio aliquam vel. Aenean laoreet est enim, ac lobortis nunc aliquet eget. Nulla vel lacinia ante.</p>
<div class="about-btn-area">
                                                <a href="#" class="button button-custom" data-text="FELSEFEMİZ"><span>FELSEFEMİZ</span></a> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <!-- Start welcome area -->
                        <!-- End welcome area -->
                    </div>
                </div>
            </div>
        </section>
        <!-- End about section -->

HTML:

THANK YOU!!
Rumata

 

Can someone at least tell me what that kind of page/window that opens is called? I don't even know what to google...

thank you!!

 

It looks to me like a lightbox-effect. Most likely it's not just HTML/CSS, there is probably JS involved as well. (Although, if they know what they are doing, this could be made without javascript).

 

Thank you very much. Indeed there is JS files in the folder. I will look further. Thank you

 

Actually what you are looking for is called a "modal dialog" -- there's even a hint of that in the anchor with the class "modal-close".

Though with that train wreck of bootcrap you've got there, mated to endless pointless DIV for nothing, endless pointless classes for nothing, and a slew of other "for nothing" doubling or even tripling the code whilst making it far from accessible, I would HIGHLY recommend pitching that entire mess in the bin and starting over.

Or at least I would assume with asshattery like this:

<div class="col-md-5 col-sm-6 col-xs-12">

Code (markup):

That it's knee deep in bootcrap. Laugh is given the nature of these modals in modern HTML I'm not even sure you should be wasting time on JavaScript for this, well, unless it were to make the close button do window.back() instead of href="#"

 

Thank you very much for the detailed response!

I am a bit disappointed. I thought I will just copy paste something somewhere and a new page will open. I will see what I can do with the window.back() option.

Thanks again!