Question

我在table中有modal，点击此模式上的按钮后，表格会更改为另一个表格。第一个表格很大，因此模态宽度较大，而第二个表格较大表很小，我想在第二个表出现后在javascript中更改模态的宽度，怎么能这样做？

$.ajax({
    type:"POST",
    url : 'UpdateResults.php',
    data : {'Data':jsonString}

}).done(function(response) {
   if (data == "Failed")
        {
            sweetAlert("","Error Occured!","error");
        }
    else
        {
            document.getElementById("UpDResults").style.display = 'block';
            $("#UpDResults").append(response).trigger("update");
            $("#Results").show();
            $("#SearchResults").hide();
            $("#UpdateResults").hide();
            $("#NoData").hide();
            document.getElementById('modal-3').style.width = '1080px';//Here what i tried
        }
});

Answer 1

您可以使用“模态对话框”类并更改宽度。您可以更改Ajax调用的成功函数的宽度。

function ChangeWidth() {
                var d = document.getElementsByClassName('modal-dialog')
                for (var i = 0; i < d.length; i++)
                {
                    d[i].style.width = "400px";
                }
           
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open First Modal</button>

<div>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>First Modal</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-default" onclick="ChangeWidth()">Change Wdith</button>
                </div>
            </div>
        </div>
    </div>
</div>

如何在javascript中更改模态宽度？

1 个答案: