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

后端 未结 2 1569
甜味超标
甜味超标 2021-02-09 02:50

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 o

相关标签:
2条回答
  • 2021-02-09 03:13

    I have placed here complete bins for above query. you can check demo link too.

    Demo: http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

    HTML

    <div id="panel">
      <input type="button" class="button" value="1" id="btn1">
      <input type="button" class="button" value="2" id="btn2">
      <input type="button" class="button" value="3" id="btn3">
      <br>
      <input type="text" id="valueFromMyModal">
      <!-- Dialog Box-->
      <div class="dialog" id="myform">
        <form>
          <label id="valueFromMyButton">
          </label>
          <input type="text" id="name">
          <div align="center">
            <input type="button" value="Ok" id="btnOK">
          </div>
        </form>
      </div>
    </div>
    

    JQuery

    $(function() {
        $(".button").click(function() {
            $("#myform #valueFromMyButton").text($(this).val().trim());
            $("#myform input[type=text]").val('');
            $("#myform").show(500);
        });
        $("#btnOK").click(function() {
            $("#valueFromMyModal").val($("#myform input[type=text]").val().trim());
            $("#myform").hide(400);
        });
    });
    

    CSS

    .button{
      border:1px solid #333;
      background:#6479fd;
    }
    .button:hover{
      background:#a4a9fd;
    }
    .dialog{
      border:5px solid #666;
      padding:10px;
      background:#3A3A3A;
      position:absolute;
      display:none;
    }
    .dialog label{
      display:inline-block;
      color:#cecece;
    }
    input[type=text]{
      border:1px solid #333;
      display:inline-block;
      margin:5px;
    }
    #btnOK{
      border:1px solid #000;
      background:#ff9999;
      margin:5px;
    }
    
    #btnOK:hover{
      border:1px solid #000;
      background:#ffacac;
    }
    

    Demo: http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

    0 讨论(0)
  • 2021-02-09 03:31

    I came across this question when I was trying similar things.

    A very nice and simple sample is presented at w3schools website.

    https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
    
    </body>
    </html>

    0 讨论(0)
提交回复
热议问题