-1
データターゲットとデータトグル属性をボタンに設定しても表示されないモーダルにはいくつか問題があります。画面が暗くなり、ブートストラップ・モーダルが表示されないのはなぜですか？
<a id="createCampaignBtn" data-target="#createCampaignModal" data-toggle="modal"
class="removeRight removeLeft buttonsA">
<div class="buttons removeRight centerTextOutHoriz">
<span class="centerTextInner buttonRight">Start a new Campaign</span>
</div>
</a>
モーダル：
<div class="modal">
<div id="createCampaignModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modalLook">
<div class="modal-header divTitlesModal">
<div class="col-xs-7 removeLeft">Start a new campaign</div>
<button type="button" class="close col-xs-1 removeRight removeLeft " data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
<div class="hidden" id="actionType"></div>
</div>
<div class="modal-body">
<form id="createCampaignForm" class="form-horizontal">
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTitle">Campaign Title</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignTitle" name="title"
placeholder="" type="text" maxlength="100" required="" autofocus=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignStartDate">Start Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignStartDate" name="startDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignEndDate">End Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignEndDate" name="endDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTypes">Type</label>
<div class="col-sm-12 col-md-12 inputContainer">
<select class="select form-control" id="campaignTypes" name="typeId">
</select>
</div>
</div>
<div class="form-group">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignDescription">Description</label>
<div class="col-sm-12 col-md-12">
<textarea class="form-control" id="campaignDescription" name="description"
placeholder="" required="" form="createCampaignForm"></textarea>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="form-group submitFormGroup">
<button type="button" class="btn btn-default cancel modalButton"
data-dismiss="modal">
Cancel
</button>
<button class="btn btn-primary modalButton modalSubmit"
value="Submit"
type="submit">Submit
</button>
</div>
</div>
<div class="col-xs-5">
<div id="holidayAlert" class="errorMessage"></div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
そして、これは何私であるモーダルが開いているときに、それがあるように画面がこれはモーダルをトリガーするボタンです...
を色あせています
CSS：
<head>
<meta charset="UTF-8">
<title>Holiday System</title>
<link rel="stylesheet" href="../commons/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="../commons/css/jquery.minicolors.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../commons/css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="../commons/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../commons/css/simple-sidebar.css">
<link href="../commons/css/style.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="../commons/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../commons/favicon/manifest.json">
<link rel="mask-icon" href="../commons/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../commons/favicon/favicon.ico">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/home.css">
</head>
とJSファイルは：
<!--Include jQuery-->
<script type="text/javascript" src="../commons/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery.serializeObject.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery-ui.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<!--Include Date Range Picker-->
<script type="text/javascript" src="../commons/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<script type="text/javascript" src="../commons/js/jquery.autocomplete.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="../commons/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/homepage.js"></script>
<script type="text/javascript" src="../commons/js/navbar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.minicolors.min.js"></script>
<script type="text/javascript" src="../commons/js/notify.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<script type="text/javascript" src="../commons/js/searchBar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.tablesorter.min.js"></script>
私はこのコードをJSで表示するモーダルを強制しようとしたが、それは一回のみ動作し、私はそれを閉じた後、それはもう動作しません。プログラム的にブートストラップのmodal('show')機能を使用することができますモーダルを表示するには
$('#createCampaignBtn').click(function() {
$("#createCampaignModal").css('display', 'block');
});
を削除し、あなたの卿に感謝します！ – Gustavo