Fancybox modal box while selecting radio button

Can anyone tell why the below code is not working while selecting radio button need to show google page in fancybox modal window…

    <!DOCTYPE html>
            <meta charset="utf-8" />
.clickncollectstore{width: 500px; position: relative;}

.clickncollectstore input[type=radio]{
  position: absolute;
  visibility: hidden;
	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;
  text-transform: none;
    vertical-align: top;
    /*padding-top: 5px;*/
     padding: 0 0px 0px 50px;

.clickncollectstore p a{
	font: 1em "TradeGothicLTStdBdCnNo.20",Helvetica,Arial,sans-serif;
	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-right: 1px;
  right: 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;
    		<script src=""></script>
    <!-- Add required fancyBox files -->
    <link rel="stylesheet" href="source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>

            target: this,
            href: ''
    		width: 700,
    			height: 600,
    			autoSize: false,
    			autoCenter: true,
    			scrolling: 'auto',
    			titleShow: false,
    			title: null,
    			centerOnScroll: true,
    			margin: 0,
    			padding: 30,
    			type: 'iframe'


    	 <div class="clickncollectstore margine35top" id="clickncollect_form">
       	<input type="radio" id="cncstoreloc" name="cncstoreloc">
        <label for="cncstoreloc">Test</label>
        <a href="#"><span class="check"></span></a>

[quote=“koder, post:1, topic:228505, full:true”]
Can anyone tell why the below code is not working while selecting radio button need to show google page in fancybox modal window.[/quote]

My console shows:

radio_modal.html:100 Uncaught SyntaxError: Unexpected identifier

That’s this section, from line 98 to 101

        target: this,
        href: ''
        width: 700,

The comma is missing at the end of the href line.

Fix that, and you’ll be able to go further from there.

yeah it’s working, just want to now how can i give specific div id to load in modal window in place of href.

You can do that via the anchor href attribute.

<a id="inline" href="#data">This shows content of element who has id="data"</a>

<div style="display:none">
    <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Instead of anchor tag need to use input radio button, while selecting radio specific div to load in fancybox modal window.

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