bootstrap 모드 상자 예제 코드 공유
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>XXX</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- -->
<!-- -->
<div class="modal">
<!-- -->
<div class="modal-dialog">
<!-- -->
<div class="modal-content">
aaaaa
</div>
</div>
</div>
<!-- -->
<!-- -->
<!--<div class="modal show">
<!C C>
<div class="modal-dialog">
<!C C>
<div class="modal-content">
aaaaa
</div>
</div>
</div>-->
<!-- , , -->
<!-- -->
<!--<div class="modal show">
<!C C>
<div class="modal-dialog">
<!C C>
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>-->
<!-- ( ), , , -->
<!-- -->
<!--<div class="modal" id="myModal" tabindex="-1">-->
<!-- tabindex , ESC -->
<div class="modal fade" id="myModal" tabindex="-1">
<!-- fade -->
<!-- -->
<!--<div class="modal-dialog">-->
<div class="modal-dialog modal-lg"><!-- -->
<!-- -->
<div class="modal-content">
<div class="modal-header">
<!-- -->
<button class="close" data-dismiss="modal"><!-- -->
<span>×</span>
</button>
<!-- -->
<h4 class="modal-title"> </h4>
</div>
<div class="modal-body">
<!--<p> </p>-->
<div class="container-fluid"><!-- , -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">haha</div>
<div class="col-lg-4 col-md-4 col-sm-6">hehe</div>
<div class="col-lg-4 col-md-4 col-sm-6">heihei</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default"> </button>
<button class="btn btn-primary"> </button>
</div>
</div>
</div>
</div>
<!-- id-->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> </button>
<!-- a ,data-target href-->
<a class="btn btn-primary" data-toggle="modal" href="#myModal"> </a>
<!--data-backdrop true, , false, , -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="false">
</button>
<!--data-backdrop true, , static, , -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static">
</button>
<!--data-keyboard true, Esc , false, -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-keyboard="false">
</button>
<!--href html data-target="#myModal" , header footer-->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" href=" .html">
</button>
<!---->
<button class="btn btn-primary" id="btn">
jQuery
</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
// $('#myModal').modal({}); ,
$('#myModal').modal({
show:false, /* , , */
/* data- */
remote:' .html' /* */
});
$('#myModal').on('show.bs.modal', function () {
alert(' , ');
});
$('#myModal').on('shown.bs.modal', function () {
alert(' , ');
});
$('#myModal').on('hide.bs.modal', function () {
alert(' , ');
});
$('#myModal').on('hidden.bs.modal', function () {
alert(' , ');
});
$('#myModal').on('loaded.bs.modal', function () {
alert(' ');/* , */
});
</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.