分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用jquery和html制作一个简单的模态弹出窗体？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我已经阅读了关于 jquery的教程,但是我很难理解它是否有人可以教我更容易,我想要发生的是,当我按下我的一个按钮时,它的值将显示在#valueFromMyButton中,当时模态弹出我可以键入文本,然后单击确定后,我键入的文本将放在#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>

解决方法

我在这里放置了完整的箱子以供上述查询.你也可以查看演示链接.

演示：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;
}