1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'HTML & Website Design' started by Rumata, May 10, 2017.

  1. #1
    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).
    SEMrush
    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
     
    Last edited by a moderator: May 10, 2017
    Rumata, May 10, 2017 IP
    SEMrush
  2. Rumata

    Rumata Well-Known Member

    Messages:
    148
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #2
    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!!
     
    Rumata, May 10, 2017 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    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).
     
    PoPSiCLe, May 10, 2017 IP
    Rumata likes this.
  4. Rumata

    Rumata Well-Known Member

    Messages:
    148
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #4
    Thank you very much. Indeed there is JS files in the folder. I will look further. Thank you
     
    Rumata, May 11, 2017 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,149
    Likes Received:
    1,705
    Best Answers:
    239
    Trophy Points:
    515
    #5
    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="#"
     
    deathshadow, May 11, 2017 IP
  6. Rumata

    Rumata Well-Known Member

    Messages:
    148
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #6
    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!

     
    Rumata, May 13, 2017 IP