Close button for colorbox modal window containing an iframe

I'm currently utilizing colorbox for a modal popup, and the content of the popup is being sourced from a URL. Since it's displayed within an iFrame, I'm wondering how I can incorporate a close button to the modal popup.

Thank you

The following code showcases color box:

<a class="Modal" href="http://google.com" onclick="openModal();">Click here</a>

Here is the corresponding JavaScript:

var openModal = function (){        
     $(".Modal").colorbox({
         iframe:true, 
         opacity:0.5, 
         scrolling:true, 
         width:832, 
         height:456, 
         top:60
     });
}
javascriptjquerycsscolorbox

Answer №1

Consider including the following code snippet in your colorbox-iframe.html

<input type="button" name="btnClose" value="Close" onclick="parent.$.colorbox.close()" />

Answer №2

I have some experience with colorbox, and one way to include a close button using jQuery is by modifying your existing function:

var openModal = function (){        
     $(".Modal").colorbox({
         iframe:true, 
         opacity:0.6, 
         scrolling:true, 
         width:750, 
         height:400, 
         top:50
     });

     $("<div class='closeButton'>Close Modal</div>").appendTo(".Modal");
     // customize the closeButton for a better visual appearance
}

// add a function to close the modal when the closeButton is clicked

$(".closeButton").on('click', function(){
   $('.Modal').fadeOut();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize strings as object keys in JavaScript

Let's say I have the following variables: var myKey = "This_is_my_key" var myObj = {"This_is_my_key" : true} What is the proper way to access myObj using the key myKey? ...

javascriptajaxjsonangularjs

Utilizing Bootstrap 4 to seamlessly transition the navbar-brand image to overlap on larger screens, and shrink-to-fit on smaller screens

I have a challenge that I'm working on. My goal is to make the navbar-brand image overlap with the navbar without changing its height, as the navbar itself has a fixed height of 80px. The current solution kinda works, but I am facing an issue ...

csstwitter-bootstrapbootstrap-4

Placing text to the right of an image inside an <li> tag

Struggling with a simple alignment issue in my code and just don't have the time to figure it out. I have two lists, each containing images and text, but I need the text to align to the right of the images instead of wrapping underneath. Here is an ex ...

htmlcsstwitter-bootstrap

AngularJS scope watch isn't firing as expected

In the scope, I store a filtering string for dates. $scope.myModel = {date:""}; Utilizing a jQuery datepicker, <input date-value="myModel.date" date-picker /> This directive updates the string through AngularJS - Attribute directive input value c ...

javascriptjqueryhtmlangularjs

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Is it possible to incorporate a static lighting effect overlay using HTML/CSS? My project consists of an HTML5/JS app with a top navigation bar and a series of cards that are transitioned through using swipe gestures. These cards are displayed in gray ove ...

javascripthtmlcss

"Ensuring Security with Stripe Connect: Addressing Content Security Policy Challenges

Despite using meta tags to address it, the error persists and the Iframe remains non-functional. <meta http-equiv="Content-Security-Policy" content=" default-src *; style-src 'self' 'unsafe-inline'; ...

javascriptphpstripe-paymentscontent-security-policy

Is there a way to access a PHP value within a self-invoked jQuery function?

I have a page that creates n links using a foreach loop: ...some html and php code <?php foreach ($tables as $table):?> ... some elements generated ... <td><a onclick="setPortalId(<?php echo $table['id']?>);$('#file ...

javascriptphpjqueryzend-framework2

executing minimal tasks when including a new particular category

When my page is loading, the "changed_value" class is not present on the page. I am adding the "changed_value" class in multiple places within the code. Upon adding this class, I want to execute several actions. The issue is that I don't want to man ...

jqueryclass

Retrieve the list of device tokens for the APNS service

Is it possible to retrieve a list of all device tokens on which my app is installed through an APNS endpoint? I am aware of the feedback service that provides the status of devices to whom messages are sent, but I believe this is only after the message ...

javascriptiosnode.jspush-notificationapple-push-notifications

Ways to conceal one message within another

I am currently working on incorporating Facebook's comments box into my website. My goal is to have the comments that I retrieve through GET requests and display in the template remain invisible to users, but visible to search engines. As part of an ...

javascriptjqueryhtmlcss

Vue 3 - Compelled to utilize any data type with computedRef

Recently, I've been diving into Vue/Typescript and encountered a puzzling error. The issue revolves around a class named UploadableFile: export class UploadableFile { file: File; dimensions: Ref; price: ComputedRef<number>; ... constr ...

javascripttypescriptvuejs3

What is the best way to forward a file upload request from a Next.js API to another API?

Trying to crop an image within a Next.js application, then sending it through an API route within the app before reaching an external API endpoint is proving to be a challenge. The process works fine without going through the API route, but once that step ...

javascriptnode.jsasp.net-coreasp.net-web-apinext.js

Add attributes to the top level

<li class="page_item"><a href="javascript:">A</a> <ul class="children"> <li class="page_item"><a href="">1</a></li> <li class="page_item"><a href="">2</a></li> </ul> < ...

javascriptjquery

Changing a collection of values in an object into a designated array shape

I have an object with the following values: const data = { "generalInfo": [{ "title": "title1", "permalink": "www.link.com", "manufacturer": "manufacturer1", "category": [{ "term_id": 3 ...

javascriptarrays

Achieving responsive design using text font percentage instead of text images can be done by implementing the following code snippet provided below

When working with text in HTML, I encountered an issue where using percentages for width and height was not giving me the desired results. To work around this, I used images of text instead, but each image ended up either stretched or looking too small. H ...

htmlcss.netimagealignment

Enabling block scrolling on a parent element using jscrollpane functionality

Is it possible to set up a jscrollpane so that the parent pane doesn't scroll when the child scroll has reached its bottom? Currently, when the child scrolling reaches the bottom, the parent also scrolls. I would like the parent to only scroll when th ...

javascriptjquerymousejscrollpane

Easily linking a React app to MongoDB

I recently developed a basic react app using 'create-react-app'. The app includes a form, validation, and Bootstrap components. It may not be extravagant, but it functions flawlessly. Furthermore, I registered with MongoDB to obtain a compliment ...

javascriptnode.jsmongodbreactjs

What is the best way to ensure that text fields remain hidden upon page load until the appropriate drop down option is chosen?

Is it possible to initially hide text fields and only reveal them when a specific drop down option is selected? The current JavaScript code somewhat achieves this, but I would like the input fields to remain hidden by default. <script language=" ...

javascripthtmljquery

Using Vue.js to increment a value in an array every time a new row is added

In Vue.js, I am attempting to increment an array value when adding a new row. However, I encounter the following error message: You may have an infinite update loop in a component render function. The JavaScript logic looks like this: new Vue({ el: ...

javascriptnode.jsecmascript-6vue.js

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack