CODEWITHSUNDEEP
bootstrap-4
Milad
Milad

Reputation: 338

Using Bootstrap 4 modal popup

I have a problem with modal in bootstrap 4 , I have two inputs when I tried to click on first input the popup is work but second input is not work !!! I wanna know why first input is work and second one is not... and how can I solve this problem ?

look at my 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/

Upvotes: 0

Views: 860

Answers (2)

gekomad
gekomad

Reputation: 565

This code manage click on buttons

<html>
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="modal fade" tabindex="-1" role="dialog" id="msgModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="msgModalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div style='color:black;' class="modal-body" id="msgModalBody">
            </div>
            <div class="modal-footer">
                <button id="ko_button_id" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button id="ok_button_id" type="button" class="btn btn-primary" data-dismiss="modal" id="btnModelConfirmMessage">OK</button>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" onclick="showConfirm('Title','bla bla',function () {alert('clicked OK')},function () {alert('clicked Cancel')})">Open Modal</button>

<script>
    function showConfirm(title, htmlInput, fun_ok, fun_ko) {
        $('#msgModalTitle').text(title);
        $('#msgModalBody').html(htmlInput);
        $('#msgModal').modal('show');
        $("#ok_button_id").prop("onclick", null).off("click");
        $("#ko_button_id").prop("onclick", null).off("click");

        $("#ok_button_id").click(fun_ok);
        $("#ko_button_id").click(fun_ko);
    }

</script>
</html>

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362620

The modal HTML is not properly formed..

<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>

Working: https://www.codeply.com/go/w6BcOFsjYv

Upvotes: 1

Related Questions