How to make a simple modal pop up form using jquery and html

0 votes

I already read the tutorials on jquery but I'm having a hard time understanding it is there someone who can teach me more easier, please I want to happen is that when I press one of my buttons its value will display in #valueFromMyButton and when the modal pop out i can type a text and after i click ok the text that I type will be placed on #valueFromMyModal

<!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <input id="btn1" type="button" value="1">
        <input id="btn2" type="button" value="2">
        <input id="btn3"type="button" value="3">

        <input id="valueFromMyModal" type="text">

        <!--How to make this pop up modal form-->
        <div id="myform">
            <form>
<label id="valueFromMyButton"></label>
            <input id="name" type="text">
            <input id="btnOK" type="button" value="Ok">
            </form>
        </div>
</body>
</html>

Jun 2, 2022 in JQuery by Edureka
• 13,690 points
7,547 views

1 answer to this question.

0 votes

Create A Modal

  1. <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ...
  2. <div id="id01" class="w3-modal">
  3. <div class="w3-modal-content">
  4. <div class="w3-container">
  5. <span onclick="document.getElementById('id01').style.display='none'
    <!-- Trigger/Open the Modal -->
    <button onclick="document.getElementById('id01').style.display='block'"
    class="w3-button">Open Modal</button>
    
    <!-- The Modal -->
    <div id="id01" class="w3-modal">
      <div class="w3-modal-content">
        <div class="w3-container">
          <span onclick="document.getElementById('id01').style.display='none'"
          class="w3-button w3-display-topright">&times;</span>
          <p>Some text in the Modal..</p>
          <p>Some text in the Modal..</p>
        </div>
      </div>
    </div>
    
    
    
answered Jun 2, 2022 by Edureka
• 13,690 points

Related Questions In JQuery

0 votes
1 answer

How to open a Bootstrap 4 modal dialog using jQuery

Use the modal('show') Method You can simply use ...READ MORE

answered Jun 28, 2022 in JQuery by rajatha
• 7,680 points
7,144 views
0 votes
1 answer

How to get all css properties and events of a html element with jquery or other libraries?

You can get the computed value of ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
1,048 views
0 votes
1 answer

How to reset a form using jQuery with .reset() method

<input type="reset"> Syntax for reset(): formObject.reset() Syntax to convert ...READ MORE

answered Jun 16, 2022 in JQuery by rajatha
• 7,680 points
15,622 views
0 votes
1 answer

How to generate a simple popup using jQuery

To create a popup, add the data-role="popup" ...READ MORE

answered Jun 17, 2022 in JQuery by rajatha
• 7,680 points
2,939 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,274 views
0 votes
1 answer

Error: Global Variable is not accessable to local function

Hey kartik, A variable declared outside a function has a ...READ MORE

answered Feb 19, 2020 in PHP by Niroj
• 82,880 points
1,069 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
15,577 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
23,205 views
0 votes
1 answer

How to disable all <input > inside a form with jQuery?

To disable all form elements inside 'target', ...READ MORE

answered Jun 3, 2022 in JQuery by Edureka
• 13,690 points
1,569 views
0 votes
1 answer

How to trigger a click on a link using jQuery

If you are trying to trigger an ...READ MORE

answered Jun 3, 2022 in JQuery by Edureka
• 13,690 points
16,330 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP