FancyBox the requested content cannot be loaded. please try again later

JavaScript
1

I have radio button code below, when i clicked on that need to open fancybox modal window but while clicking it is saying ‘the requested content cannot be loaded’.

Radio button code:

<div class="" id="clickncollect_form">
   <input type="radio" id="cncstoreloc" name="cncstoreloc">
    <label for="cncstoreloc">Test</label>
   <span id="radio_check" class="check"></span>
</div>

Content div to load in fancybox modal window:

<div style="display:none">
   <div class="main-container" id="cnc">
	<h1>CLICK & COLLECT</h1>
   </div>
</div>

js

<script>
$(document).ready(function(){

     $("#cncstoreloc").fancybox({
    target: this,
    href: '#cnc',
	width: 1080,
		height: 400,
		autoSize: false,
		autoCenter: true,
		scrolling: 'auto',
		titleShow: false,
		title: null,
		centerOnScroll: true,
		margin: 0,
		padding: 30,
		//type: 'iframe'
		afterShow: function(){
			$('#quicksearch').on('click', function(){
			$('#cncstorepane').css('display','block');
			});
		},

		afterClose: function(){
			$('#radio_check').removeClass('radio_chk');
		}
		
}).on("click", function (evt) { 	$('#radio_check').addClass('radio_chk');    });

});
</script>

Does anyone have any idea instead of loading the content it’s throwing error.