Question

我在引导程序4中有模态问题，当我尝试单击第一个输入时，我有两个输入，弹出窗口是有效的，但是第二个输入却不起作用！我想知道为什么第一个输入有效而第二个输入无效...我该如何解决这个问题？

看看我的HTML

<input type="text" class="form-control" data-toggle="modal" data-target="#myM1" data-backdrop="false"> <!--First Input is Work -->
<input type="text" class="form-control" data-toggle="modal" data-target="#myM2" data-backdrop="false"><!--Second Input is not Work-->

        <!-- First Modal -->
        <div class="modal" id="myM1">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Hello 1</h6>
                    <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">Hello World 1</div>
        </div>

        <!-- Second Modal -->
        <div class="modal" id="myM2">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Hello 2 </h6>
                    <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                  Hello World 2
                </div>
            </div>
        </div>

https://jsfiddle.net/oyq19fjd/2/

Answer 1

模式HTML格式不正确。

<input type="text" class="form-control" data-toggle="modal" data-target="#myM1" data-backdrop="false">
<input type="text" class="form-control" data-toggle="modal" data-target="#myM2" data-backdrop="false">

<div class="modal" id="myM1">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Hello 1</h6>
                <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                Hello World 1
            </div>
        </div>
    </div>
</div>

<div class="modal" id="myM2">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Hello 2 </h6>
                <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                Hello World 2
            </div>
        </div>
    </div>
</div>

工作：https://www.codeply.com/go/w6BcOFsjYv

使用Bootstrap 4模式弹出窗口

1 个答案: