Question

我想在变量中存储模态，然后在用户单击按钮时显示模态。我试过这个，但是当我点击按钮并且没有控制台错误时没有任何反应。

$( '.outlet' ).on('click', function(e) {
        e.preventDefault();
        var prodID = $(this).data('id');
        var modal = `
                        <div class="modal fade" id="myModal" role="dialog">
                            <div class="modal-dialog">
                                <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>Some text in the modal.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
         $(modal).show();
    });

Answer 1

您必须将modal绑定到DOM，才能使其可见。在您的代码中，modal变量的HTML不在DOM中，这就是它不显示的原因。

喜欢在这里展示：

$("body").before(modal).show();

虽然您使用show()函数将HTML附加到DOM，但您不需要before（除非HTML代码的样式属性设置为{{ 1}}或者你想要动画或......）。

这里是工作示例。 我添加了一些HTML来运行示例。

display:none

$( '.outlet' ).on('click', function(e) {
        e.preventDefault();
        var prodID = $(this).data('id');
        var modal = `
                        <div class="modal fade" id="myModal" role="dialog">
                            <div class="modal-dialog">
                                <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>Some text in the modal.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    console.info("IN THE CLICK FUNCTION");
         $("body").before(modal);
         $(".modal").show();
   
    });

.modal { 
margin:50px;
position: fixed; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
z-index: 99; 
display: none; 
overflow: hidden; 
-webkit-overflow-scrolling: touch; 
outline: 0; 
}

将模态存储在变量中并在点击时显示

1 个答案: