I am going to go on and apologize from the start- I am sure this is a silly issue, but I just can't seem to find what I am doing wrong here (including searching stack overflow which has some questions on this) and it has literally been days. I've basically copied and pasted the example for an inline popup for Magnific Popup (http://codepen.io/dimsemenov/pen/GEKgb), but even that doesn't work (I am working on a different use, but whatever I am doing wrong, it's also with even this simple example).
Code is below, but I also did a JSFiddle:
http://jsfiddle.net/avogel27/RS6aR/
Thanks for any help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script src="js/jquery-1.10.1.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<!--
Alternative markup with data-mfp-src attribute:
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a>
-->
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
<br/><br/>
<button>Dynamically create and show popup</button>
<script>
$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
// Example: 2 Dynamically created
$('button').magnificPopup({
items: {
src: '<div class="white-popup">Dynamically created popup</div>',
type: 'inline'
},
closeBtnInside: true
});
});
</script>
</body>
</html>
The problem with your jsfiddle is you added the external reference incorrectly. It should be http://www.metoceanpartnerships.org/js/jquery.magnific-popup.js instead of www.metoceanpartnerships.org/js/jquery.magnific-popup.js.
You are also missing the css style for the popup:
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width:auto;
max-width: 500px;
margin: 20px auto;
}