我想将模态存储在变量中，然后在用户单击按钮时显示模态。我试过了，但是当我点击按钮时没有任何反应，也没有控制台错误。
$( '.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">×</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();
});
最佳答案
您必须将 modal 绑定(bind)到 DOM，以使其可见。在您的代码中，您的 modal 变量的 HTML 不在 DOM 中，这就是它不显示的原因。
喜欢在这里展示:
$("body").before(modal).show();
尽管您不需要 show()，因为您使用 before 函数将 HTML 附加到 DOM(HTML 代码除外有一个样式属性设置为 display:none 或者你想要一个动画或者...)。
这里是工作示例。 我添加了一些 HTML 以使示例运行。
$( '.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">×</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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="outlet">test</button>
</body>关于javascript - 将模态存储在变量中并在点击时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50572238/