Use bootstrap combined with jQuery to implement a simple modal dialog box

Hi, hello, I'm here again. Today, I will share with you the usage of a plug-in that is commonly used in work - the modal dialog box. Presumably, you have encountered many pages in your work, and you need to use modal dialog boxes for interaction. Now, let us understand its use together.

First of all, we have to prepare three files, the css file of bootstrap, the js file of bootstrap, and the js file of jQuery .

Introduce three lines of files in the head, as follows:

<link rel="stylesheet" href="../vendor/bootstrap.css">
<script src="../vendor/jquery-3.6.0.js"></script>
<script src="../vendor/bootstrap.bundle.js"></script>

Then, we went to the official website, copied the bootstrap code, and made a cv God of War. As for me, I modified the content in its code, because what I want to say now is to complete a series of operations on this basis. I changed the text inside into an input box. After all, the project is the interaction between the user and the input box, right?

The html code looks like this:

<button class="btn evidence_show btn btn-success" id="btn1">点我打开模态框</button>
<p id="word"></p>
<!-- 模态框（Modal） -->
<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"
                    onclick="close_bg()">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">
                <input id="inp" value="" type="text">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="close_bg()" data-dismiss="modal">关闭</button>
                <button type="button" onclick="submit()" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

The modal box is hidden by default. When we open it, it looks like this:

The fork in the upper left corner of the dialog box and the close button in the lower right corner, the corresponding method of clicking is close_bg, which means that closing this modal dialog box means hiding it. Clicking the button opens (displays) the modal dialog. We make a p tag on the left to save the submitted value.

1. Click the button to open the modal box, and the value of the input box is the innerHTML of the p tag outside.

2. Click the cross or close to clear the content of the input box first, and then close and hide the modal dialog box.

3. Click Submit, assign the value of the input box to the innerHTML of the outer p tag, and then hide the modal dialog box.

This is just the interaction of the front end, and does not call the interface to the back end. At work, our thinking is:

1. Click the edit button, a modal dialog box will pop up, and the value in the input box will be called to the backend interface and displayed.

2. Click the cross or close to clear the content of the input box first, and then close and hide the modal dialog box.

3. Click submit to call the interface, use the post method to pass the data in the box in the form of the back-end interface, thereby modifying the value in the database, and finally close and hide the input box.

Not much to say, let me first write a code that does not involve calling the interface. You should be able to write the code for calling the interface.

<script>
    $("#btn1").click(function () {
        //显示模态框
        $("#myModal").modal('show')
        //输入框的值为p的html
        $("#inp").val($("#word").html())
    })
    function close_bg() {
        //点击关闭，就要清空输入框内容
        $("#inp").val('')
        //关闭模态框
        $("#myModal").modal('hide')
    }

    function submit() {
        //得到输入框的值，赋值出来
        $("#word").html($("#inp").val())
        //关闭模态框
        $("#myModal").modal('hide')
    }
</script>

Alright, that’s all for today’s content, let’s try it out. see you next time