FancyBox is not working

koder · June 27, 2016, 1:52pm

The below code is not working and also I have to implement two things 1) need to disable the default close button with my own custom button which i had written ‘tpl’:{} but it’s not working. 2) while selecting the radio button it’s not showing checked. can anyone help on these things.

<!DOCTYPE>
<html>
<head>
<style>
.clickncollectstore{width: 500px; position: relative;}

.clickncollectstore input[type=radio]{
  position: absolute;
  visibility: hidden;
}
.margine35top{
	margi-top: 35px;
}
.clickncollectstore label{
	/*display: block;*/
	position: relative;
  text-transform: uppercase;
    vertical-align: top;
    font: 1.2em "TradeGothicLTStdBdCnNo.20",Helvetica,Arial,sans-serif;
    padding-top: 5px;
    letter-spacing: 1px;
  padding: 25px 0 0 50px;
  margin: 0px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
}
.clickncollectstore p{
	display: block;
	position: relative;
	font: 0.96em "TradeGothicLTStdBdCnNo.18",Helvetica,Arial,sans-serif;
	color:#999;
  text-transform: none;
    vertical-align: top;
    /*padding-top: 5px;*/
     padding: 0 0px 0px 50px;
     line-height:24px;

}
.clickncollectstore p a{
	font: 1em "TradeGothicLTStdBdCnNo.20",Helvetica,Arial,sans-serif;
	color:#333;
	text-decoration: underline;
  text-transform: none;
      padding-top: 5px;
     /*padding: 0 25px 25px 60px;*/

}

.clickncollectstore span.check{
  display: block;
  position: absolute;
  border: 1px solid #AAAAAA;
  border-radius: 100%;
  height: 11px;
  width: 11px;
  top: 5px;
  left: 20px;
	z-index: 5;
}
.clickncollectstore span.check:hover {
  border: 1px solid #ff0000;
}

.clickncollectstore span.check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  padding-bottom:1px;
  padding-right: 1px;
  right: 1px;
  bottom:1px;
  height: 8px;
  width: 8px;
  margin:0 auto;
  text-align: center;
}

.clickncollectstore input[type=radio]:checked ~ .check {
  border: 1px solid #333;
}

.clickncollectstore input[type=radio]:checked ~ .check::before{
  background: #333;
}
.fancybox-close{
cursor: pointer;
	height: 40px;
	top:7px;
    right: 0px;
    position: absolute;
    width: 42px;
    z-index: 15;
    font-size: 2.5em;
    margin-top: -15px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.0.4/jquery.fancybox.pack.js"></script>
<script>


    $("#cncstoreloc").fancybox({
       target: this,
       href: 'http://www.w3schools.com',
			width: 700,
			height: 400,
			autoSize: false,
			autoCenter: true,
			scrolling: 'auto',
			titleShow: false,
			title: null,
			centerOnScroll: true,
			margin: 0,
			padding: 30,
			type: 'iframe'
			'tpl': {
	        closeBtn: '<div title="Close" class="fancybox-item fancybox-close">X</div>'
	    }
			
   });

</script>
</head>
<body>
   <div class="clickncollectstore margine35top" id="clickncollect_form">
   	<input type="radio" id="cncstoreloc" name="cncstoreloc">
    <label for="cncstoreloc">Test</label>
    <p>Test</p>
    <p>Testing</p>
    <span class="check"></span>
   </div>

</div>
</body>
</html>

DaveMaxwell · June 27, 2016, 2:20pm

The fancybox wasn’t loading because of a javascript error trying to load the min jQuery. I changed the two js links to the ones in the example script, and the fancybox loaded (after I added the comma after the iframe parameter to fix that error, of course)

<!DOCTYPE>
<html>
<head>
<style>
.clickncollectstore{width: 500px; position: relative;}

.clickncollectstore input[type=radio]{
  position: absolute;
  visibility: hidden;
}
.margine35top{
	margi-top: 35px;
}
.clickncollectstore label{
	/*display: block;*/
	position: relative;
  text-transform: uppercase;
    vertical-align: top;
    font: 1.2em "TradeGothicLTStdBdCnNo.20",Helvetica,Arial,sans-serif;
    padding-top: 5px;
    letter-spacing: 1px;
  padding: 25px 0 0 50px;
  margin: 0px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
}
.clickncollectstore p{
	display: block;
	position: relative;
	font: 0.96em "TradeGothicLTStdBdCnNo.18",Helvetica,Arial,sans-serif;
	color:#999;
  text-transform: none;
    vertical-align: top;
    /*padding-top: 5px;*/
     padding: 0 0px 0px 50px;
     line-height:24px;

}
.clickncollectstore p a{
	font: 1em "TradeGothicLTStdBdCnNo.20",Helvetica,Arial,sans-serif;
	color:#333;
	text-decoration: underline;
  text-transform: none;
      padding-top: 5px;
     /*padding: 0 25px 25px 60px;*/

}

.clickncollectstore span.check{
  display: block;
  position: absolute;
  border: 1px solid #AAAAAA;
  border-radius: 100%;
  height: 11px;
  width: 11px;
  top: 5px;
  left: 20px;
	z-index: 5;
}
.clickncollectstore span.check:hover {
  border: 1px solid #ff0000;
}

.clickncollectstore span.check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  padding-bottom:1px;
  padding-right: 1px;
  right: 1px;
  bottom:1px;
  height: 8px;
  width: 8px;
  margin:0 auto;
  text-align: center;
}

.clickncollectstore input[type=radio]:checked ~ .check {
  border: 1px solid #333;
}

.clickncollectstore input[type=radio]:checked ~ .check::before{
  background: #333;
}
.fancybox-close{
cursor: pointer;
	height: 40px;
	top:7px;
    right: 0px;
    position: absolute;
    width: 42px;
    z-index: 15;
    font-size: 2.5em;
    margin-top: -15px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" />
<script src="http://fancyapps.com/fancybox/lib/jquery-1.10.2.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#cncstoreloc").fancybox({
       target: this,
       href: 'http://www.w3schools.com',
			width: 700,
			height: 400,
			autoSize: false,
			autoCenter: true,
			scrolling: 'auto',
			titleShow: false,
			title: null,
			centerOnScroll: true,
			margin: 0,
			padding: 30,
			type: 'iframe',
			'tpl': { closeBtn: '<div title="Close" class="fancybox-item fancybox-close">X</div>' }
   });
	});
</script>
</head>
<body>
   <div class="clickncollectstore margine35top" id="clickncollect_form">
   	<input type="radio" id="cncstoreloc" name="cncstoreloc">
    <label for="cncstoreloc">Test</label>
    <p>Test</p>
    <p>Testing</p>
    <span class="check"></span>
   </div>

</div>
</body>
</html>

koder · June 27, 2016, 2:27pm

@DaveMaxwell: Kudos to you!!!

While selecting checkbox it’s not showing checked, did you identified that, it’s the main issue.
Can you know what’s the reason and any alternative for that.

DaveMaxwell · June 27, 2016, 3:00pm

No clue. You’re hiding the actual radio button with css, but I fail to see where what you see is being created. It may be Monday, but I’m not seeing what’s creating the radio button you’re seeing.

I’ll have to think about it, but if anyone else sees what I’m missing, hopefully they’ll jump in - I’m guessing it’s something blatantly obvious since those typically give me the most fits, but I’m not seeing it at the moment…

koder · June 27, 2016, 3:35pm

@DaveMaxwell Thanks for prompt response and effort.

I have tried to modified the default radio button styles with css3 it’s working, after implementing the fancybox modal window the radio checked styles are not applying.

Just remove the inline javascript and check it’s working.

The main criteria is while selecting the radio button need to show fancy modal window and need to customize the default radio button this way i tried but machine failed Let me know if you have any thoughts to implement that.

Thanks once again

Paul_Wilkins · June 27, 2016, 11:47pm

Fancybox is designed to prevent the default action.

The only way for it to not prevent the default action is for its .open() method to return false, which only occurs when the _start() method returns false. That occurs only when there is no href reference, or when there is no type provided.

Unless you edit the fancybox code directly (which is not advised), I don’t think that there is any way to avoid it preventing the default action.

As such, the only viable solution seems to be for us to perform that default action directly instead, which we can force from the end of the fancybox code.

Here’s the magic:

    var id = $(evt.target).attr("for");
    $("#" + id).prop("checked", true);

and here’s how you would use it in context, after the fancybox code:

      'tpl': { closeBtn: '<div title="Close" class="fancybox-item fancybox-close">X</div>' }
    }).on("click", function (evt) {
        var id = $(evt.target).attr("for");
        $("#" + id).prop("checked", true);
    });

koder · June 28, 2016, 12:20pm

@Paul_Wilkins: Really appreciate your help here, it’s working. Kudos!!!

Instead of getting attribute simply adding one class like below, but the main thing I didn’t notified that how to remove the class after closing the modal window. I am not sure how to do that.

Anyhow learned alot from you, any workaround to remove the class let me know

.on(“click”, function (evt) { $(‘#radio_check’).addClass(‘radio_chk’); });

Big thanks for your effort.

system · September 27, 2016, 7:21pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Fancybox modal box while selecting radio button JavaScript	5	3566	September 26, 2016
Fancybox is not working JavaScript	3	9662	September 26, 2016
FancyBox the requested content cannot be loaded. please try again later JavaScript	3	23183	September 30, 2016
Fancybox closeClick issue JavaScript	1	666	October 8, 2014
Fancybox.ajax not functioning JavaScript	4	3454	October 8, 2014

FancyBox is not working

Related topics