如何使用内部 html 和引导程序使这个简单的 jQuery 弹出模式在页面加载时显示
Posted
技术标签:
【中文标题】如何使用内部 html 和引导程序使这个简单的 jQuery 弹出模式在页面加载时显示【英文标题】：how to make this simple jQuery popup modal with inside html and bootstrap to be shown on page load 【发布时间】：2022-01-24 02:38:25 【问题描述】：我正在尝试在页面加载时显示此 jQuery 弹出模式。我在***的一篇文章中使用了这段代码，它的功能是点击按钮显示弹出窗口。我试图编辑它以在页面加载时显示弹出窗口，但我不能。请帮忙。
这是我正在尝试的 jQuery 代码： '''
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function()
var modalHtml =
' <div class="modal-content">' +
' <div class="modal-body">' +
' <button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
' <span aria-hidden="true">×</span>' +
' </button>' +
' <strong>Oh snap!</strong> Change a few things up and try submitting again.' +
' </div>' +
' </div>';
$(window).load(function()
$(".modal-dialog").html(modalHtml);
$(".modal-dialog").modal('show');
);
$("button").after('<div class="modal-dialog modal"></div>');
);
</script>
</head>
<body>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary">
Show Modal
</button>
</div>
</body>
</html>
'''
【问题讨论】：
【参考方案1】：如果您在正文中加载模式而不是使用脚本会更好。然后在页面上加载完所有内容后使用 JQuery 显示模式。
有关更多信息，请查看有关模式的 Bootstrap 文档。 https://getbootstrap.com/docs/4.0/components/modal/
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
/* Function for running scripts after the page has loaded */
$(document).ready(function ()
$('#showModal').modal();
);
</script>
</head>
<body>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#showModal">
Show Modal
</button>
<!-- Modal -->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="showModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于如何使用内部 html 和引导程序使这个简单的 jQuery 弹出模式在页面加载时显示的主要内容，如果未能解决你的问题，请参考以下文章