javascript - 为什么屏幕变暗并且我的 Bootstrap 模式没有出现？

Question

我的模式有一些问题，即使我为我的按钮设置了数据目标和数据切换属性，它也没有显示出来。屏幕像模态打开时一样褪色...

这是触发模式的按钮:

  <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">&times;</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 代码强制显示模态框，但它只工作了一次，在我关闭它后，它就不再工作了。

$('#createCampaignBtn').click(function () {
    $("#createCampaignModal").css('display', 'block');
});

Answer 1

您需要删除模态上的包装器 div:

<div class="modal"></div>

包装器阻止模态显示。