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

后端 未结 2 1566
甜味超标
甜味超标 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


    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

提交回复
热议问题