Incorporating a interactive modal display feature on the website that appears upon clicking a button

I have successfully created a modal view that I want to display in the center of the screen when the button #showModalView is clicked, and then hide the modal if a user clicks outside of it. You can check out the code for the modal view here: modal view fiddle.

However, I am facing challenges integrating this view into my current website structure. Here is the basic framework of my website:

<div>
  <div class="header">THIS IS HEADER</div>
  <p>paragraph 1</p>
  <p>paragraph 1</p>
  <div class="button">
    <a id="showModalView" href="#">CLICK ME</a>
  </div>
  <br />
  <div class="FOOTER">THIS IS FOOTER</div>

</div>

Does anyone have any suggestions on how I can seamlessly integrate the modal view into my website?

htmlcssmodal-dialog

Answer №1

To implement this functionality using jQuery, you can follow the code snippet below:

$("#showModalView").click(function(){
$("#buy-wrapper").show();
});

$("#buy-wrapper").click(function(e){
if ($(e.target).closest("#buy-box").length === 0)
$("#buy-wrapper").hide();
});
.buy-input-general {
  outline: none;
}

#buy-wrapper {
  display:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(200, 54, 54, 0.5);
}

#buy-box {
  width: 345px;
  height: 470px;
  background-color: #fff;
  margin: 0 auto;
  
  // Additional CSS properties...

}

// More CSS styles...

</code></pre>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="header">HEADER TEXT HERE</div>
  <p>paragraph 1</p>
  <p>paragraph 1</p>
  <div class="button">
    <a id="showModalView" href="#">CLICK ME</a>
  </div>
  <br />
  <div class="FOOTER">FOOTER TEXT HERE</div>

</div>

<div id="buy-wrapper">
  <div id="buy-box">
    <div id="top_header">
      <h3>Lallaa</h3>
      <h5>
        Enter details. <br />
          You know, because reasons and stuff.  <br />Just do it.
      </h5>
    </div>
    <di id="buy-inputs">
      <input class="buy-input-text buy-input-general" type="text" placeholder="First name">
      <input class="buy-input-text buy-input-general" type="text" placeholder="Last name">
      <input class="buy-input-text buy-input-general" type="text" placeholder="Email">   
      <input class="buy-input-submit buy-input-general" type="submit" value="NEXT">
    </di>
    <div id="bottom">
      
    </div>
  </div>
</div>

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

Is there a way to prevent pixels from being rendered outside of a designated rectangle in HTML5?

I'm looking to add screen-in-screen functionality to my HTML5 game, and I have an idea for how to approach it: //Function called every frame function draw(){ set a mask rectangle only draw pixels from the current frame that fall within this recta ...

javascripthtml

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

Is it possible to nest a span element inside a form_for label tag? I am trying to achieve this in order to style a specific part of the label using CSS, such as making the text red. While it seems like valid HTML based on my research, it is causing some is ...

ruby-on-railscssformshtmlruby-on-rails-3

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

A manual configuration has been set up to accommodate all the technologies mentioned in the title (webpack, typescript, phaser, and angular). While it works perfectly for angular component stylesheets, there seems to be an issue with including a global st ...

cssangulartypescriptwebpacksass

Interacting with a card in vuejs won't trigger any action

Is there a way to make an overlay disappear when clicking anywhere on the screen except for a specific card positioned on top of it? The current setup makes the overlay disappear even when the card is clicked. How can this behavior be corrected? <div ...

javascripthtmlcssvue.js

Cover the HTML background with floating objects using background-size:cover

I recently encountered an issue on a page I was working on. The body had an image background set to cover the entire screen using background-size:cover. To ensure the whole page was filled with content regardless of its size, I added html { height:100% }. ...

css

implementing a time picker feature with jQuery

As I am not familiar with jQuery, I came across this script while searching for a time picker. If anyone could guide me on how to incorporate this code into my HTML page to enable the time picker functionality, I would greatly appreciate it. /* jQuery t ...

jqueryhtmlcss

Error message in JavaScript: Uncaught type error - Trying to call a function with an empty string

I am looking to utilize JavaScript functions to change the body color, font color, and link color. function bodyBackgroundColor(color){ var target = document.querySelector('body') target ...

javascripthtmlfunction

Automated error checking using Javascript, HTML, and PHP

I'm new to HTML and looking for a way to implement instant error checking on forms. For example, I want an error message to display if a user enters a username that is less than 5 characters or more than 15 characters. The error should disappear once ...

javascriptphphtml

Attempting to utilize the red, green, and blue functions in LESS CSS to extract RGB values and subsequently inject them into a gradient

Is there a way to extract individual r, g, b values from a hex code and then use them in a background gradient without dealing with rgb values separately? I attempted to utilize the red(@color), green(@color), blue(@color) functions but encountered an erro ...

cssfunctionless

Ways to eliminate undesired margin

I am struggling with formatting an HTML list into columns and I can't seem to remove the space between each column. It's frustrating because I want the list to display like rows, without any spacing or at least the ability to control the size of ...

htmlcsshtml-lists

Using Angular material to display a list of items inside a <mat-cell> element for searching

Can I use *ngFor inside a <mat-cell> in Angular? I want to add a new column in my Material table and keep it hidden, using it only for filtering purposes... My current table setup looks like this: <ng-container matColumnDef="email"> < ...

cssangulartypescriptangular-material

What mechanisms does Vue employ to halt the browser from sending a server request when the URL in the address bar is modified?

When a link <a href='www.xxx.com'> is clicked in a traditional HTML page, the page is redirected to the new page. In a Vue application, we utilize the Router. See the code snippet below. Vue.use(Router); export default new Router({ mode ...

javascripthtmlvue.js

CSS for a Div with a Subtle Curve at the Bottom

Is there a way to achieve this specific shape using CSS? I attempted to use the following resources, but they didn't provide me with the desired outcome. Curved border with stroke in pure CSS? http://jsfiddle.net/ECHWb/ .banner-img{ height: 661p ...

htmlcss

"Incorporate keyframes to create a mouseleave event with a distinctive reverse fade

After posing a similar question a few days back, I find myself encountering yet another hurdle in my project. The task at hand is to switch the background image when hovering over a button with a fade-in effect using @keyframes. However, I'm stuck bec ...

javascripthtmlcss

Issues encountered while attempting to convert HTML Image and Canvas Tags to PDF within Angular 2

I am currently facing an issue with my code. My requirement is to download HTML content as a PDF file. I have been successful in downloading text elements like the <p> tag, but I am encountering difficulties when trying to download images and canvas ...

htmlangulartypescriptpdfcanvas

the sizing issue with three div elements

I am attempting to create 3 parallel divs in HTML. The middle div should be exactly 960px wide and centered on the page, with the left and right divs positioned on either side. The minimum width of the page is set to 1024px. When the browser width exceed ...

javascriptjquerycsswidthoverflow

The nightmare of centering with margin:auto

I've exhausted all my options trying to center the navigation menu, but I just can't seem to get it right. I've experimented with text-align, margin-auto, block display... on both the parent and child elements. It's frustratingly simple ...

htmlcssxhtmlcentermargin

Limit not reached by substring function

When the character limit exceeds 20 characters, the substring function extracts the first 20 characters typed in the input. It replaces any additional characters that are entered after reaching the max limit of 20. In my program, however, I am able to con ...

javascripthtmlcharactercounting

Struggling to modify CSS properties for :before and :after pseudo-elements?

My current styling looks like this: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } It's working p ...

javascriptjquerycss

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

I have a situation where I need to dynamically add a class to a div whenever a select2 dropdown is open. To achieve this functionality, I am utilizing the open and close events of select2. The current code successfully adds the class when opening a selec ...

javascriptjqueryhtmlcssjquery-select2