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

时间:2018-06-19 10:56:03

标签: javascript html css html5 modal-dialog

我正在学习如何通过以下教程在HTML中创建自定义对话框,但是我无法完全理解如何按照我想要的方式创建它们。我想实现以下目标:

我要创建的第一个包含listview。

enter image description here

第二个是对话框,其中包含要在关键字中输入的文本框,并通过单击“创建”添加到数据库。

enter image description here

我已经学过教程但是作为初学者,我无法完全理解如何进行创作,因此任何帮助都会很好。

通过在线搜索,我已经能够创建使用模式来提出: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

1 个答案:

答案 0 :(得分:0)

In your code modal opens properly, I can't see any problem over there. You just need to advance a bit in HTML, and CSS.

Start with W3 schools, they have awesome and easy tutorials for HTML5 and CSS. I think you will be able to make what you want once your basic will be clear. There are many ways to design the modal you are making.

Follow this... CSS Tutorials...

Custom modal without Bootstrap... CSS modal...