Question

我遇到使用Jquery渲染引导模式的问题这是我到目前为止所做的：

HTML

<div id="myModal" class="modal fade">
    <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">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Jquery的

$('#update_modal').on('click', function() {
        console.log("clicked");
        jQuery.noConflict();
        $("#myModal").modal('show');
    })

有一个ID为＆＃34; update_modal＆＃34;的按钮。

这是Snapshot的样子。你可以看到它没有正确渲染所有内容，我也无法点击任何关闭模态的地方。

如果我遗漏了任何错误，请有人告诉我。谢谢

Answer 1

在这里，我已经复制了问题https://jsfiddle.net/z26sxpvk/2/

$('#update_modal').on('click', function() {
  $("#myModal").modal('show');
});

#myModal {
  z-index:0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="update_modal" type="submit">
Open Modal
</button>
<div id="myModal" class="modal fade">
    <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">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

问题正在发生，因为modal的{{1}}小于z-index。

您可以使用解决方案https://jsfiddle.net/z26sxpvk/3/

modal-backdrop

$('#update_modal').on('click', function() {
  $("#myModal").css({
  	'z-index': 1050
  }).modal('show');
});

#myModal {
  z-index:0;
}

只需增加<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button id="update_modal" type="submit"> Open Modal </button> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirmation</h4> </div> <div class="modal-body"> <p>Do you want to save changes you made to document before closing?</p> <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>的{{1}}值。

z-index

希望这会对你有所帮助。

Answer 2

这个适用于我，在aria-hidden="true"

中添加了<div>

<div class="modal" id="myModal" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>

                <div class="modal-body">
                    <p>Do you want to save changes you made to document before closing?</p>
                    <p class="text-warning">
                          <small>If you don't save, your changes will be lost.</small>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Answer 3

Your modal

我尝试了您的代码并完美显示，可以使用按钮关闭。我假设你尝试通过attriubutes显示和隐藏模态，使用class =＆＃34; modal＆＃34;和data-target =＆＃34; #myModal＆＃34;。如果您的模态与上面的代码完全不同，可能会对此进行分类： 1.安置模式是错误的。 2.或升级您的bootstrap框架。先尝试使用属性，然后使用javascript，如代码或改进。希望这可以帮到你。保持你的精神：D。

Bootstrap Modal Jquery无法正确呈现或显示

3 个答案: