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.

id="animatedModal", class="popup-modal", <!--THIS IS IMPORTANT! to close the modal, the class name.

Discussion in 'jQuery' started by Alex Duncan, Oct 9, 2019.

  1. #1
    Hi There,
    i'm new to JSquerys and really excited about using them especially this template which i'm trying to modify.
    Can you spare a little time to take a look at the JSquery for me, It's been 5 weeks now trying to resolve.
    Under the My projects section(index), i'm trying to link the thumbnails to alternative content.
    Currently all thumbnails link to demo01 which outputs a popup and text "Geschäfts Eines, Appropriately maintain etc" text. I've tried creating content for demo02, demo03 etc, updating the #ref buttons, playing about with the ID, class, content etc but no luck.
    SEMrush
    Please can someone help or alternatively create an example for demo02 so I can understand how the ID, CLASS relate to the #ref. I'd be so grateful,

    Thank you
    Alex
     
    Alex Duncan, Oct 9, 2019 IP
    SEMrush
  2. Alex Duncan

    Alex Duncan Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Hi, Can anyone tell me how to get the two popups to work, it only opens demo01.

    Thanks Alex


    <!--DEMO01 Nav-->
                            <!-- portfolio_container -->
                            <div class="no-padding portfolio_container clearfix" data-aos="fade-up">
                                <!-- single work -->
                                <div class="col-md-4 col-sm-6  fashion logo">
                                    <a id="demo01" href="#animatedModal" class="portfolio_item"> <img src="img/portfolio/01.jpg" alt="image" class="img-responsive" />
                                        <div class="portfolio_item_hover">
                                            <div class="portfolio-border clearfix">
                                                <div class="item_info"> <span>Mockups in seconds</span> <em>Fashion / Logo</em> </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <!-- end single work -->
    <!--DEMO02 Nav-->     
                                <!-- single work -->
                                <div class="col-md-4 col-sm-6 ads graphics">
                                    <a id="demo02" href="#animatedModal" class="portfolio_item"> <img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
                                        <div class="portfolio_item_hover">
                                            <div class="portfolio-border clearfix">
                                                <div class="item_info"> <span>Floating mockups</span> <em>Ads / Graphics</em> </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <!-- end single work -->
    
    
    <!--DEMO01 Popup script-->
        <div id="animatedModal" class="popup-modal">
            <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
            <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
            <div class="clearfix"></div>
            <div class="modal-content">
                <div class="container">
                    <div class="portfolio-padding">
                        <div class="col-md-8 col-md-offset-2">
                            <h2>Demo01<br /> Web-Studios</h2>
                            <div class="h-50"></div>
                            <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                            <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                            <br />
                            <br /> <img src="img/portfolio/02.jpg" alt="" class="img-responsive" />
                            <br />
                            <br />
                            <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                            <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                            <br />
                            <br /> </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
        <!--  plugins  -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/aos.js"></script>
        <script src="js/jquery.form.js"></script>
        <script src="js/jquery.validate.min.js"></script>
    
        <!--  main script  -->
        <script src="js/custom.js"></script>
    </body>
    
    </html>
    Code (markup):

    <!--DEMO02 Popup script-->
        <div id="animatedModal" class="popup-modal">
            <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
            <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
            <div class="clearfix"></div>
            <div class="modal-content">
                <div class="container">
                    <div class="portfolio-padding">
                        <div class="col-md-8 col-md-offset-2">
                            <h2>Demo02<br /> Web-Studios</h2>
                            <div class="h-50"></div>
                            <p>Hello please work    .</p>
                            <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                            <br />
                            <br /> <img src="img/portfolio/02.jpg" alt="" class="img-responsive" />
                            <br />
                            <br />
                            <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                            <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                            <br />
                            <br /> </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
        <!--  plugins  -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/aos.js"></script>
        <script src="js/jquery.form.js"></script>
        <script src="js/jquery.validate.min.js"></script>
    
        <!--  main script  -->
        <script src="js/custom.js"></script>
    </body>
    
    </html>
    Code (markup):
     
    Last edited by a moderator: Oct 10, 2019
    Alex Duncan, Oct 10, 2019 IP