Troubleshooting CSS Problems in a Lightbox

I have developed a custom lightbox for watching Youtube videos that is fully functional. However, the design aspect leaves much to be desired. Please take a look at it.

Despite my best efforts to improve it, the outcome is still not satisfactory. Here is a link to a JSbin where you can see the lightbox in action: http://jsbin.com/UDIGeveg/1/edit

I have included my CSS below. I am struggling with making the 'close' X button appear properly within the dialog box. Any suggestions on how to achieve this?

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
jqueryhtmlcss

Answer №1

To ensure the button displays properly, you should take out the overflow: hidden; property from the following code:

div#openMContainter { 
    width: 600px; 
    height: auto;
    display:block; 
}

The presence of overflow limits the visibility of the button to only what is contained within its parent element.

Answer №2

If you're looking to clean up the appearance, here is a suggestion:

Update the CSS to achieve uniform padding around the screen:

// Maintain consistent padding for the grey area
.modalDialog > div {
    padding: 20px;
}

// Adjust the position of the 'close button'
.close {
    top: 2px;
    right: 2px;
}

Next, in your JavaScript code:

// Modify the width to fit within the designated grey area
width: '600',

Give this a try to enhance the final look of your project. Best regards,

Sarah

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

How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

Is there a way to make HTML elements have a width ranging from 150px to 200px while filling up 100% of their parent's width? Check out Image 1: https://i.sstatic.net/nYNGp.jpg And here is Image 2 (after resizing the window): https://i.sstatic.net/ ...

htmlcssflexbox

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

Requiring a compulsory field in PHP and MySQL

I am facing an issue with the following query: $tww_update_sql = "UPDATE `telesales_anc` SET `Ime` = '".$_POST['Ime']; I also have a form with a submit button structured like this: <form id="contact" method="post" action="ANC_pozivanje ...

phphtmlmysql

The process of creating a React build varies greatly from the initial development phase

Thank you for offering to help me! After building my React web app, it looks very different from development mode. I use serve -s build to monitor the app build. However, even on my online DigitalOcean server, it doesn't appear the same as in develop ...

javascriptcssreactjsbuildstyled-components

What's the reason for fadeIn() not functioning properly?

Here's the HTML code I'm working with: <!DOCTYPE html> <html> <head> <title>Furry Friends Campaign</title> <link rel="stylesheet" type="text/css" href="styles/my_style.css"> </head ...

javascriptjqueryfadein

perplexed by the pair of buttons

Is it possible to change the default behavior of an ASP.NET button so that pressing the ENTER key on the keyboard submits a different button instead? If so, how can this be done? ...

asp.nethtml

Redirect the Submit button to the specified URL from the form element

Looking for a way to create a form with two fields: Username and Password. Upon clicking submit, the username and password should be added to the URL in a specific format. For instance: The URL structure will remain the same, only the "username_entered_i ...

javascriptphpjqueryhtml

Arrange a table by merging rows

As a native French speaker, please don't worry about any mistakes in my sentences. I am currently attempting to organize a table that includes cells with rowspan. However, I am unsure if it is achievable with datatables or tablesorter. Do you have a ...

jquerydatatablestablesorter

Issue with Trix text editor not triggering the change event

Lately, I've been facing some difficulties in getting the tirx-change event to trigger when there are changes in the content of a trix-editor. Despite using React JS for the view, I haven't been able to identify the problem. Below is the code sni ...

javascripthtmleventsreactjsrich-text-editor

Issue with triggering function using focusout event

After creating a validateName function that works when called using name.validateName(); the name being var name = $("#name");, I now need to bind it together with the focusout event. I want the function to execute when the input field loses focus. I atte ...

jquery

The process of invoking a function upon the loading of the body

Greetings! I am currently utilizing this script to incorporate social media icons into my website. <div id="menu" class="shareSelector" style="width:250px; height:250px;"></div> $(document).ready(function () { $('.shareSelector&apos ...

javascriptjqueryhtmlsocialshare

Iterate through the array and display each element

I am facing an issue with looping through an array in JavaScript/jQuery and printing the values to the console. Even though it seems like a simple task, I am unable to make it work. Currently, I have only one value in the array, but I believe adding more v ...

javascriptjqueryarrays

recurring issues with time outs when making ajax requests

During the development of my website, I tested it as localhost. Now that it's nearly complete, I switched to using my local IP address and noticed that about 30% of my ajax calls result in time out errors or 'failed to load resource errors'. ...

javascriptphpjqueryajaxapache

Changing the dimensions of a div according to the container's size

I'm currently working on a project that involves an HTML video player with custom Javascript controls, utilizing SVG graphics for the backgrounds. However, I've encountered an issue with using the css calc() function to resize the divs based on t ...

javascriptjquerysvg

Unable to use Selenium web driver for C# to choose an element by its tag name

Currently, I am utilizing Selenium Web Driver in C# to interact with Google Chrome browser. However, when attempting to retrieve the inner HTML (text) of a specific element as shown in the provided HTML snippet below, an error message "no such element ...

c#htmlseleniumselenium-webdriverselenium-chromedriver

Whenever I attempt to populate my modal box with data from my selection, I am greeted with an error message stating "invalid object passed in." What could be causing this issue?

Whenever I click on a customer from my table to display their details in a modal box, I keep getting an error message that says "invalid object passed in." The method client is responsible for populating the data and displaying it through a partial view. T ...

javascriptjqueryasp.net-mvcrazormodal-dialog

Is it possible to switch from a dropdown menu to radio buttons?

I am looking to change the dropdown menu in my search section into radio buttons. Currently, when I select something from the dropdown menu, the search fields are altered. Here is the code for the dropdown menu: <select id="qs_category" name="qs_catego ...

javascripthtmlbuttondrop-down-menusmarty

Helping individuals identify the HTML5 Geolocation notification

Currently working on a website that requires users to accept the browser prompt for location sharing. Many users seem to overlook this prompt, which can lead to issues. The main problem we are facing is that each browser displays this prompt differently: ...

javascripthtmlgeolocation

Running jQuery before page load: Tips and techniques

My website contains numerous images and scripts, however the scripts can only run after the entire page has finished loading. Is there a way to speed up this process? ...

jqueryhtml

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Initially, I had a userscript designed to search for a specific string within a webpage. If the script failed to locate the string, it would refresh the page after 4 seconds: var item = 'apple'; if(document.body.innerHTML.toString().indexOf(item ...

javascriptjqueryuserscripts