时间戳

首页 > 解决方案 > 创建自定义对话框/弹出框 HTML

javascript - 创建自定义对话框/弹出框 HTML

问题描述

我正在学习如何通过以下教程在 HTML 中创建自定义对话框，但还不能完全理解如何以我想要的方式创建它们。我想实现以下目标：

我要创建的第一个包含一个列表视图。

在此处输入图像描述

第二个是对话框，有文本框输入关键字并通过单击创建添加到数据库。

在此处输入图像描述

我已按照教程进行操作，但作为初学者，我无法完全理解如何进行创建，因此任何帮助都会很好。

通过在线搜索，我已经能够使用模态来创建：http: //jsfiddle.net/jLs8myoa/9/

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Input Form</h4>
            </div>
            <div class="modal-body">
           enter keyword <input type="textbox" id="textbox1"> </input><br>
                <button type="button">Search</button>
                <div> Listview </div>
            </div>
        </div>
    </div>
</div

我遵循的几个教程

https://www.w3schools.com/howto/howto_css_signup_form.asp

https://www.youtube.com/watch?v=-RLE2Q7OzME

标签： javascriptcsshtmlmodal-dialog

解决方案

在您的代码模式正确打开时，我看不到那里有任何问题。您只需要在 HTML 和 CSS 方面有所进步。

从 W3 学校开始，他们有很棒且简单的 HTML5 和 CSS 教程。我认为一旦你的基础清晰，你将能够做出你想要的。有很多方法可以设计您正在制作的模态。

按照这个... CSS教程...

没有 Bootstrap 的自定义模态... CSS modal...

推荐阅读