Jquery 单击按钮时弹出一个窗体

我希望在单击按钮时，表单显示在页面中心。我找到了一个解决办法。 但是，它能以一种更简单的方式完成，而不必包括jqueryui吗

---

还有，如何使背景字段不可访问？i、 例如，当窗体打开时，背景字段应该可见，但我不能与它们交互。

您可以创建自己的对话框，并使用

display:none

将其初始隐藏。然后将按钮上的单击事件设置为对话框中的

.show（）

显然，应该将对话框设置为

位置：固定
，并通过使用
顶部
、
左侧
、
底部
或
右侧
CSS属性居中

我创造了这样一支钢笔
使用jquery非常简单：


$（'.openform'）。单击（函数（）{
if（！$（this）.hasClass（'open'））{
$（'.form'）.css（'display'，'block'））
$（this.addClass（'open'）；
$（this.text（'CLOSE FORM'）；
}
否则{
$（'.form'）.css（'display'，'none'））
$（this.removeClass（'open'）；
$（this.text（'打开形式'）；
}
});

输入{
显示：块；
边缘底部：10px；
}
.家长{
位置：相对位置；
高度：100vh；
}
形式{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
显示：无；
填充：20px；
背景颜色：浅灰色；
}
.公开表格{
显示：绝对；
顶部：10px；
左：10px；
光标：指针；
颜色：红色；
}

名称
姓
城市
开放式
创建一个隐藏表单，然后单击按钮，使用和切换表单


$（'show'）。在（'click'，函数（）{
$（'.center'）.show（）；
$（this.hide（）；
})
$（'#close'）。在（'click'，函数（）{
$（'.center'）.hide（）；
$（'#show'）.show（）；
})
.center{
保证金：自动；
宽度：60%；
填充：20px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}
hideform先生{
显示：无；
}

X
名字：



姓氏：




Show form
使用和使用jQuery函数，然后使用函数创建表行


$（“#创建用户”）。单击（函数（）{
$（“#弹出窗口”）.show（）；
});
$（“#关闭、#取消、#创建”）。单击（函数（）{
$（“#弹出”）.hide（）；
});
$（“#创建”）。单击（函数（）{
var name=$（“#name”）.val（）；
var email=$（“#email”）.val（）；
var password=$（“#password”）.val（）；
$（“#users tbody”）。追加（“+name+”“+email+”“+password+”）；
});
正文{
字体系列：Arial、Helvetica、无衬线字体；
}
桌子{
字号：1em；
利润率：1米0；
边界塌陷：塌陷；
宽度：100%；
}
标签，
输入{
显示：块；
}
input.text{
边缘底部：12px；
宽度：95%；
填充：.4em；
}
字段集{
填充：0；
边界：0；
边缘顶部：25px；
}
h1{
字体大小：1.2米；
边缘：.6em0；
}
表td，
表th{
边框：1px实心#eee；
填充：.6em10px；
文本对齐：左对齐；
}
#弹出窗口{
位置：相对位置；
z指数：100；
填充：10px；
}
.内容{
位置：绝对位置；
z指数：10；
背景：#ccc；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.覆盖{
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景：#000；
z指数：5；
不透明度：0.4；
}

现有用户：
名称
电子邮件
密码
无名氏
厕所。doe@example.com
约翰多尔
创建新用户
✖
名称
电子邮件
密码
创建帐户
取消

$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
$（'.bg-modal'）.addClass（'bg-modal-visible'）；
});
$（'.bg model'）。在（'click'，函数（e）上{
e、 预防默认值（）；
log（$（e.target））；
if（$（e.target）.is（'.fa close'）| |$（e.target）.is（'.col-md-12'）| |$（e.target）.is（'.bg model'））{
$（'.bg-modal'）.removeClass（'bg-modal-visible'）；
}
});
});
*{
填充：0；
保证金：0；
}
身体{
背景#0B3861；
}
*,
*：之后，
*：之前{
框大小：边框框；
-webkit框大小：边框框；
}
标题{
背景：#f80；
填充：40px；
}
收割台h1{
颜色：#fff；
文本转换：大写；
}
钮扣{
保证金：自动；
浮动：无；
位置：相对位置；
顶部：50px；
左：45%；
}
.btn警告{
背景：rgba（255,100,45,0.9）；
}
.btn警告：悬停{
背景：rgba（255,100,45,1）；
}
.bg模式{
不透明度：0；
可见性：隐藏；
过渡：所有0.2秒缓进缓出；
-webkit转换：所有0.2秒易入易出；
位置：固定；
背景：rgba（0,0,0,0.6）；
排名：0；
左：0；
身高：100%；
宽度：100%；
}
.bg模式可见{
不透明度：1；
能见度：可见；
过渡：所有0.2秒缓进缓出；
-webkit转换：所有0.2秒易入易出；
}
.弹出窗口{
背景：#fff；
填充：20px；
边界半径：5px；
宽度：400px；
保证金：60像素自动；
转换：translateY（-400px）；
-webkit转换：translateY（-400px）；
}
.bg模式可见。弹出窗口{
变换：translateY（0px）；
-webkit转换：translateY（0px）；
过渡：所有0.2秒缓进缓出；
-webkit转换：所有0.2秒易入易出；
}
.弹出窗口：在{
显示：块；
内容：“；
明确：两者皆有；
}
.弹出式正文{
利润率：20px 0px；
}
.弹出标题{
边框底部：1px实心#ccc；
填充底部：30px；
}
.ul{
列表样式：无；
}
.popup ul li.active a{}
李丽娜先生{
背景:#F78181；
填充：10px；
宽度：50%；
显示：块；
浮动：左；
颜色：#fff；
文本对齐：居中；
文本装饰：无