javascript - 我想在页面加载时显示模式对话框以及按钮切换,两者
问题描述
问题是我需要在页面加载时显示模态对话框以及按钮切换。现在按钮切换工作正常,我在用我自己的模板构建的 wordpress 站点中使用 bootstrap 3.3.7。但我无法在页面加载时显示模式对话框。我有一个带有 jquery 依赖项的 bootstrap.min.js 队列,因为我的网站上的其余功能都像预期的那样工作。这是我正在使用的代码。
var jqmodalshow = jQuery.noConflict();
jqmodalshow(document).ready(function(){
jqmodalshow("#myModal").modal('show');
});
<head>
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">BUTTON</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe our Newsletter</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</body>
解决方案
问题是因为您为创建模式而编写的 HTML 格式不正确。id
您在两个无效的位置重复了相同的操作,并且嵌套了.modal
and的副本.modal-dialog
。JS 有效且有效。
如果您修复 HTML 问题,则代码可以正常工作。
jQuery($ => {
$("#myModal").modal('show');
});
<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/2.1.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-sm" data-toggle="modal" data-target="#myModal">BUTTON</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe our Newsletter</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
推荐阅读
- angular - 为什么我的 Mongoose 控制器没有被调用?
- reactjs - 在我的 Redux 设置中没有调用 Reducer
- c++ - 转换为右值后,线程参数必须是可调用的
- javascript - 防止 10 分钟邮件响起(网页)
- python - 如何使用 ctypes 在 Python 中发送 char* 类型参数?
- python - 在 Django 中以 html 模式加载动态数据
- javascript - Node.js 获取字符串中所有出现的子字符串
- pine-script - 是否有自动“价格与柱线比率”计算的公式?
- oauth-2.0 - 在 OpenID Connect with PKCE 中,客户端如何知道用户重定向后使用哪个 code_verifier 发送哪个授权码?
- database - 微服务、数据库关系和缓存