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

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.

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

 

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):

 

Stunning example of when NOT to use JavaScript... much less the train wreck laundry list of how not to use JavaScript that is jQuery or the monument to devleoper ignorance, incompetence, and ineptitude that is bootcrap. That's not on you, that's on the mere existence and 3i of the people who created these derpy systems of doing things.

Hell, just the presence of "clearfix" should be warning enough you've been suckered by people who haven't pulled their craniums out of 2003/earlier's rectum.

Though your incomplete code doesn't show where these are being opened, such modals are a likely candidate for either the :target approach, or the input:checked method.

Let's go with the former technique as an example:

<div id="demo01" class="modal">
	<a href="#" class="modalClose">
	<div>
		<a href="#" class="modalClose">
		<h2>Demo01<br /> Web-Studios</h2>
		<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>
		<img
			src="img/portfolio/02.jpg"
			alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL"
			class="plate"
		>
		<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>
	</div>
<!-- #demo01.modal --></div>

Code (markup):

This does not require a single line of JavaScript to even be done unless you REALLY need that IE8/earlier support, since even IE9 supports :target. Since you're using bootcrap which has gone flex, it's not like you're even IE9 compatible anymore.

.modal,
.modal > a {
	width:100%;
	height:100%;
	top:0;
}

.modal {
	position:fixed;
	left:-100%;
	display:flex;
	overflow:auto;
}

.modal > a {
	position:absolute;
	left:0;
}

.modal:target {
	left:0;
}

.modal > div {
	position:relative; /* depth sort over outer a
}

Code (markup):

Using CSS transitions to animate as appropriate. The inner .modalClose anchor getting styled as appropriate as your close button. You could put multiples of these on a page with ZERO problems since the simple act of visiting the href="#demo01" would do the trick. Again, not a line of scripting needed!

The MOST I would do with JavaScript is to enhance the close button to do a window.history.back instead of following the #.

function modalClose(e) {
	window.history.back();
	e.preventDefault();
}

var closeAnchors = d.getElementsByClassName('modalClose');
for (var i = 0, a; a = closeAnchors[i]; i++) {
	window.addEventListener(click, modalClose, false);
}

Code (markup):

Just so that you don't flood the history with #. Still works scripting disabled, the scripting just enhances the already working page.

See these articles of mine for more, outlining both the input:checked and .modal:target approaches.

https://cutcodedown.com/tutorial/modalDialogs
https://cutcodedown.com/tutorial/mobileMenu

Bottom line? Bloated messes like this are why I consider front end frameworks a monument to 3i. Ignorance, incompetence, and ineptitude. The people who created garbage like bootcrap and jqueery having ZERO blasted business telling anyone how to build a website.