Fancybox modal box while selecting radio button

JavaScript
1

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>
    <html>
        <head>
            <meta charset="utf-8" />
    		<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;
}
</style>
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></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>
    <script>
    $(document).ready(function(){

         $("#cncstoreloc").fancybox({
            target: this,
            href: 'https://www.google.com/'
    		width: 700,
    			height: 600,
    			autoSize: false,
    			autoCenter: true,
    			scrolling: 'auto',
    			titleShow: false,
    			title: null,
    			centerOnScroll: true,
    			margin: 0,
    			padding: 30,
    			type: 'iframe'
        });

    });

    </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>
        <a href="#"><span class="check"></span></a>
       </div>
    	</body>
    </html>
2

[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

     $("#cncstoreloc").fancybox({
        target: this,
        href: 'https://www.google.com/'
        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.

3

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

4

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>
</div>
5

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

6

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