Unable to open modal in browser due to HTML, CSS, and jQuery issues

I'm having trouble creating a modal window that opens when a button is clicked for user registration. The button is being clicked, but the modal window isn't appearing. Here's my code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="button">
  <button type="button" onclick="document.getElementById(mymodal).style.display='block';">Create</button>


  <div id="mymodal" class="ourmodal">
    <div class="modal-content">

    </div>
  </div>
</div>
<style>
.ourmodal{
  display:none;
  position:fixed;
  overflow:auto;
  z-index:1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:grey;
}
.modal-content{
  background-color:honeydew;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>
javascriptjqueryhtmlcssmodal-dialog

Answer №1

Don't forget to include single quotes:

<button type="button" onclick="document.getElementById('mymodal').style.display='block'">....

Answer №2

If you have jquery inserted, you are able to utilize it in your code.

To implement this functionality, simply assign an ID to the button and use the following code:

<div class="button">
      <button type="button" id="open-modal" ">Create</button>


      <div id="mymodal" class="ourmodal">
        <div class="modal-content">

            <button id="close-modal">close</button>
        </div>
      </div>
    </div>

Then add the script after including jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <script>
        jQuery('#open-modal').on('click',function(){
            jQuery('#mymodal').show();
        });
        jQuery('#close-modal').on('click',function(){
            jQuery('#mymodal').hide();
        });
      </script>

Answer №3

@ram-kc

Feel free to test out this code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="button">
  <button type="button" data-toggle="modal" data-target="#mymodal">Create</button>


  <div id="mymodal" class="ourmodal">
    <div class="modal-content">

    </div>
  </div>
</div>
<style>
.ourmodal{
  display:none;
  position:fixed;
  overflow:auto;
  z-index:1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:grey;
}
.modal-content{
  background-color:honeydew;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>

Give this code a try and see if it meets your needs. Thanks in advance!

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

Tips for creating a sophisticated state transition diagram using Typescript

If you have a creative idea for a new title, feel free to make changes! I have two enums set up like this: enum State { A = "A", B = "B", C = "C" } enum Event { X = "X", Y = "Y", Z ...

javascripttypescript

When a parent document is deleted, Mongoose automatically removes any references to child documents

Greetings everyone, thank you for taking the time to read my query. I am looking to remove a child object that is referenced in a parent object. Below is the structure: const parentSchema: = new Schema({ name: String, child: { type: mongoose.Schema. ...

javascriptnode.jsmongodbmongoose

Storing approximately 1 kilobyte of information throughout various pages

Is it feasible to store approximately 1kb of data while transitioning between two pages on the same domain using Javascript, Jquery (1.7), and Ajax? For instance, a user inputs data into a textbox on one page and then moves to another specific page. Can ...

javascriptjqueryajaxviewstate

Request to convert jQuery Ajax code into Vanilla JavaScript code

Are there any vanilla JavaScript alternatives available for the code snippet below? function verifyEmail() { var apiUrl = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email&apos ...

javascriptjqueryajaxapiemail-validation

Adjusting Renderer Size in ThreeJS for Fullscreen Display

After creating a ThreeJS application designed for a 4:3 layout with multiple buttons and features, I decided to enable Fullscreen mode using THREEx.Fullscreen.js. Although the Fullscreen mode is functioning properly, a new issue arose - the renderer size(x ...

javascriptcssthree.jsfullscreen

Utilizing JQuery to differentiate a single element within a group of elements

As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...

javascriptjqueryhtmlcss

Eliminate the standard cell padding in nested HTML tables

In my setup, there is a parent table where each td tag in the tr tag contains a child table. Specifically, as shown in the example with Data WS-C3.... in the picture. [![<table class="table table--bordered table--nostripes table-top"> <thead& ...

htmlcssangular

Get binary information without relying on the use of arraybuffer

I have a specific resource that I am utilizing: function _arrayBufferToBase64(buffer) { var binary = ''; var bytes = new Uint8Array(buffer); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String. ...

javascriptangularjs

Design a dynamic card with an eye-catching Font Awesome icon that adapts well to

As I delve into the realm of CSS, my current mission is to replicate the captivating cards showcased on this particular website. Utilizing Font Awesome icons has become a pivotal aspect of this endeavor. For instance, let's take a look at this card:ht ...

htmlcssbootstrap-4font-awesome

In what way does React ensure state encapsulation while passing state as a prop to a child component?

This question pertains to an intricate aspect of React, specifically focusing on state encapsulation. The example provided in this response to the query mentioned in this post illustrates how React props that are objects are passed by reference: const ...

javascriptreactjs

Extracting data from a JQGrid in HTML5 Builder: a beginner's guide

Apologies for asking this question as I couldn't find any relevant posts addressing it specifically in relation to HTML5 builder. I am trying to retrieve the value of the "ID" column, which happens to be the last column among the four, based on the r ...

phpjavascripthtmljqgridhtml5builder

Tips for inserting an object into an array while concurrently saving it to a file in Node.js

Is there a way to add objects to an array while writing to a file in Node Js? Presently, my functioning code looks like this: fs.appendFile("sample.json", JSON.stringify(data, undefined, 2) + ","); with 'data' being an object similar to this: ...

javascriptarraysnode.jsfs

If a checkbox is checked, then the value in the textbox should be multiplied by 0

I'm faced with a challenge involving a non-clickable textbox that is meant to hold a running total. Each time a checkbox is clicked, its value should be added to the total in the textbox. However, I am now struggling to figure out how to perform mult ...

javascriptjqueryhtml

Clicking a button in JavaScript can pass an ID by triggering an onClick

Here is the function that triggers when the button is clicked <button type="button" class="btn btn-info " onClick= "show('<?php echo $data ?>')" name="show" >Show</button> This is the show function defined in the .js file f ...

javascriptphp

Incorporating image URI into HTML for validation purposes

My website validation is encountering issues, mainly due to data/images base64 URIs. I ran a diagnosis on Error: Malformed byte sequence: e9. At line 2, column 259 (etc.) The analysis from https://validator.w3.org/ simply states that it cannot anal ...

htmlw3c-validationdata-uri

How can you ensure a form is properly validated using javascript before utilizing ajax to submit it

I've been working on developing a website and I am in need of an attractive login/registration/forgot password form. My aim was to utilize 'ajax' to enhance the user experience, leading me to immerse myself in a steep learning curve for the ...

javascriptjqueryajaxvalidation

Create PDF and Excel files using Javascript on the client side

Are there any client-side Javascript frameworks that are comparable to Jasper Report in Java? I need to be able to generate both PDF and Excel files on the client side (browser) without relying on server-side processing. While I've come across Ja ...

javascriptexcelpdfember.jsnpm

What could be causing the target to malfunction in this situation?

Initially, I create an index page with frames named after popular websites such as NASA, Google, YouTube, etc. Then, on the search page, <input id="main_category_lan1" value="test" /> <a href="javascript:void(0)" onmouseover=" window.open ...

javascripthtml

Does an event fire after the onclick event completes?

After an onclick event, I need a particular code to be executed. This works well on mobile devices using touchstart and touchend events. However, is there an equivalent event for computers? This is how my current code looks like: document.getElementById( ...

javascriptjqueryhtmlonclickdom-events

ng-disable will only evaluate when the page is initially loaded

I am facing an issue with around 10 textboxes on a form page. The condition I have is as follows: Disable the textboxes if the logged in user does not have permission Disable the textbox if the user has permission, but there is already a value loaded fro ...

jqueryhtmlangularjs