為什么屏幕變暗並且我的引導程序模式不顯示？

Question

我的模態有一些問題，即使我將data-target和data toggle屬性設置為我的按鈕也不會出現。 屏幕就像模態打開時一樣褪色...

這是觸發模式的按鈕：

  <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

您需要刪除模態中的wrapper div：

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

包裝器防止出現模態。

Answer 2

要以編程方式顯示模態，可以使用引導程序的modal('show')函數。

$('#createCampaignBtn').click(function () {
    $("#createCampaignModal").modal('show'); // initializes and invokes show immediately
});

您甚至可以省略show參數，這是默認操作。

Answer 3

試試這個Jsfiddle

$('#createCampaignBtn').click(function () {
  $("#createCampaignModal").modal("show");
});

並刪除

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