Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below:

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: realtive;
  display: inline-block;
  background-color: grey;
  width: 100px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.close {
  position: absolute;
  display: inline;
  color: #aaa;
  float: right;
  font-size: 16px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p>tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

Additionally, I would like the modal box to have the style shown in the image below for the top.

javascriptjqueryhtmlcss

Answer №1

Include a display:flex property within the .cButton class.

.cButton {
  /*rest of code*/
  display:flex;
  align-items: center;
  justify-content: space-between;
}

You can remove the position:absolute from the .close class.

To create the triangle shape, utilize 

border-left, border-right, border-bottom
.

Refer to the provided snippet for a practical example.

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: relative;
  background-color: grey;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cButton:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  right: 25px;
  top: -15px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #000;
}

.close {
  color: #aaa;
  font-size: 16px;
  font-weight: bold;
  padding-right: 10px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p>tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

Answer №2

After reviewing the code snippet, I decided to eliminate the position absolute as it seemed unnecessary. Instead, I have styled the elements to work perfectly inline without any issues. Specifically, I modified the p tag to be an inline element by applying a class and appropriate styling.

Additionally, I suggest considering removing the p element from the closing button if you do not want it to be included there.

Best of luck with your coding!

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: realtive;
  display: inline-block;
  background-color: grey;
  width: 100px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.close {
  /*position: absolute; <-Remove this-->*/
  display: inline;
  color: #aaa;
  float: right;
  font-size: 16px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

p.boxtitle {
    display: inline;
}
<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p class="boxtitle">tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

Answer №3

I decided to give it a go, and here's what I found.

The close button had an absolute position, but the tob/bottom/left/right values were missing. Additionally, there was a typo in the cButton class: position: realtive;.

To create the triangle at the top, I used the before and after pseudo-elements of the modal container with CSS triangle shapes (check out this link for examples). I also adjusted the modal's position slightly downward to accommodate the triangle and made sure it appears where the user clicks ;)

You can position the modal using the tob/bottom/left/right CSS attributes and fine-tune the offset with the transform attribute of the modal itself.

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(e) {
  modal.style.display = "block";
  modal.style.top = e.clientY+'px';
  modal.style.left = e.clientX+'px';
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  transform: translateY(12px);
}

.modal::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-bottom: 12px solid #55f;
  position: absolute;
  top: -11px;
  left: 0;
}
.modal::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: -10px;
    left: 2px;
}

.modal-content {
  background-color: #fefefe;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: relative;
  display: inline-block;
  background-color: grey;
  width: 100px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.close {
  position: absolute;
  display: inline;
  color: #aaa;
  font-size: 16px;
  font-weight: bold;
  top: 17px;
  right:4px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p>tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

Answer №4

.popup {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.popButton {
  position: relative;
  display: inline-block;
  background-color: #f7f7f7;
  width: 100px;
  border-top: 1px solid #f7f7f7;
  border-bottom: 1px solid #f7f7f7;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  text-indent:5px;
}

.close-button {
      position: absolute;
    display: inline;
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    top: 13px;
    right: 8px;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Revise the CSS to achieve the desired outcome.

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

Print Vue page with the same styling as the original

How can I add a print button to my application that prints the page with the original CSS styles? I am currently using window.print() function and have a separate file called print.scss with specific print styles. @media print { header {display:none; ...

cssvue.jsprintingstyles

Looking for a JavaScript (Angular) event listener to trigger when closing pages and tabs

I am looking for an event that will only work when closing a page or tab, but should not be triggered when the page is refreshed. I am aware of the "beforeunload" event, but it also gets activated on page refresh. Below is the code snippet I am currently ...

javascriptangulartypescript

Guide for building a Template-driven formArray in Angular

I am currently implementing a fixed number of checkboxes that are being bound using a for loop. <ul> <li *ngFor="let chk of checkboxes"> <input type="checkbox" [id]="chk.id" [value]="chk.value&q ...

javascriptangulartypescriptangular-formsangular-template-form

The positioning of a div element is not functioning as expected

I am currently updating my portfolio project. The page I am working on includes an image with a specific date displayed on it. I want to add text below the image, but I am encountering some issues: The text I want to include is meant to be a link, like th ...

htmlcss

Using AngularJS Scope to Map an Array within a JSON Array

I'm attempting to extract the type and url values from the media2 object within this JSON array and assign them to an AngularJS scope Array. "results":[ { "session2":[ { "__type":"Object", "abou ...

javascriptarraysangularjsjson

Using localStorage in Next.js, Redux, and TypeScript may lead to errors as it is not defined

Currently, I am encountering an issue in my project where I am receiving a ReferenceError: localStorage is not defined. The technologies I am using for this project are Nextjs, Redux, and Typescript. https://i.stack.imgur.com/6l3vs.png I have declared ...

javascriptreactjsreact-reduxnext.jsreact-typescript

Building a div element within a React function

For an exercise, I need to create an input field and a button. The goal is to display the text from the input field in a div/span below when the button is clicked. If I change the text in the input field and click the button again, the displayed text shoul ...

javascriptreactjs

The previous user's selection of checkboxes will be disabled

https://i.stack.imgur.com/fH1g2.pnghttps://i.stack.imgur.com/Oiu6q.pngI am facing an issue where I want all the records (seats selected by the user) to be disabled, but the code provided only fetches the last record and disables it. <?php ...

phphtml

What are the appropriate levels of access that an operating system should provide for web-based scripting?

Contemplating the level of access web-based applications have to an operating system has been on my mind. I'm pondering: What is the most effective method for determining this currently? Are we seeing a trend towards increased or decreased access? ...

javascriptscriptingoperating-system

Double Marker Challenge in Brochure

I am currently using Leaflet in conjunction with VueJs. I have encountered an issue where a double marker is appearing at a specific location when I add a marker: The code responsible for this behavior is as follows: mounted() { this.map = L.ma ...

javascripthtmlvue.jsexpressleaflet

Accessing nodejs environment variables in a VueJS single page application

Creating a single page application with the use of Vue, running it with nodejs, and encapsulating it in a docker container poses an interesting challenge. In an attempt to adhere to the principles outlined in the 12 factor app methodology, one is advised t ...

javascriptnode.jsvue.jsvuejs2

Compiling a list of products, but the user interface needs some adjustments

Currently, I have designed a product list menu that includes a hover dropdown feature. This means that when a user hovers over a specific menu item, the corresponding list will automatically appear. However, I am facing two issues with this setup. Firstly, ...

htmlcssangular

jspdf generates blank PDF files

I am trying to use JsPDF to generate a PDF from content within a Section tag. I have followed various guides but none of them seem to be working for me. Since there is no demo code available, I am turning to this platform in hopes of finding a solution. A ...

javascriptjqueryjspdf

Having trouble loading popper.js using Laravel mix and webpack

I have been working on my project with Bootstrap 4 beta and Laravel 5.4, using npm and Laravel mix to load my JavaScript dependencies. Everything was going smoothly until I encountered an error while trying to use Bootstrap JavaScript methods. The error me ...

javascriptlaravel-5webpackbootstrap-4

A guide on transferring variables to sessions instead of passing them through the URL in PHP

<a class='okok' id='$file' href='" . $_SERVER['PHP_SELF'] . "?file=" . $file . "'>$file</a> The given code snippet represents a hyperlink that passes the filename to the 'file' variable, which ...

javascriptphpjqueryajaxsession

Is it possible in HTML to detect *any* changes made to an input, not just those made by the keyboard?

Let's consider a scenario where we have an input element like this: <input id="myInput" type="text" /> The question now arises, how can we detect when the value of this input is changed programmatically (such as through $("#myInput").val("new ...

javascripthtmldom

Conceal or reveal form elements based on input selection

In my current HTML form generated by PHP, I have multiple instances of the following structure: function show(elem, show){ var elements = elem.parentNode.parentNode.parentNode.getElementsByClassName("hidden"); var i; for(i=0; i<eleme ...

javascript

jQuery eliminates the placeholder text in a textarea once the textarea text has been cleared

I'm dealing with a Bootstrap modal that contains a textarea. My goal is for the textarea to be empty every time the modal is opened. However, I've run into an issue where using $('textarea').val('') to clear the text also rem ...

jquerytwitter-bootstrap

What is the best way to update the state of object.item[n] that is nested within an array, which in turn is nested within

A unique data structure is set up in the following way: const library = [ { procedureName:'Build Foundations', id:1, tasks:[ { taskName:'dig at least 1m deep', isCompleted:false, procedureId:1 }, ...

javascriptreactjsecmascript-6

Effortlessly deleting a row with JQuery and PHP without reloading the page

I am currently working on creating a jQuery function to delete a div, but I'm facing an issue. Whenever I click the submit button, the div is not being removed and the page gets refreshed. How can I achieve this without refreshing the page? You can ...

javascriptphpjqueryajax