为什么屏幕变暗并且我的引导程序模式不显示？

Question

I have some problems with my modal which doesn't show up even though I set data-target and data toggle attributes to my button. The screen is faded like it is when the modal is open...

This is the button that triggers the modal:

  <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>

The modal:

<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 -->

And this is what I've included for this page:

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>

And the js files:

<!--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>

I tried to force the modal to show up with this js code, but it works only one time and after I close it, it doesn't work anymore.

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

Answer 1

You need to remove the wrapper div on the modal:

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

The wrapper prevents the modal from showing up.

Answer 2

To show the modal programatically you can use bootstrap's modal('show') function.

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

You can even omit the show parameter, which is the default action.

Answer 3

Try this Jsfiddle

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

And remove

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