我有一个代码按钮： -
<button type="button" name="btn-success" data-toggle="modal" data-target="#exampleModal" class="btn-success">Process</button>
与模态。
现在我想改变这样的按钮
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
我希望在函数中执行data-toggle="modal" data-target="#exampleModal"。
我试过了
<script>
function myFunction(){
data-toggle="modal" data-target="#exampleModal";
};
</script>
但它没有用。任何人都可以教我如何做到这一点？
你可以试试这个，因为你正在使用bootstrap。
<script>
function myFunction(){
$("#exampleModal").modal('toggle'); //see here usage
};
</script>
你的HTML
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
你正在使用bootstrap，所以最好使用modal('toggle')
function myFunction(){
$("#exampleModal").modal('toggle')
}
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
工作实例
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style id="compiled-css" type="text/css">
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
function myFunction() {
$("#exampleModal").modal('show')
}
</script>
</head>
<body>
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
<div id="exampleModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
</body>
</html>