Thymleaf Web: Bootstrap Modal auf 80% height horizontal zentriert

Diskutiere Thymleaf Web: Bootstrap Modal auf 80% height horizontal zentriert im HTML / CSS / JScript / AJAX Bereich.

Bitte aktiviere JavaScript!
S

Schuriko

Ich war mir nicht ganz sicher in welchen Bereich dieses jetzt genau reinfällt.

Ich habe eine Thymleaf Web - Anwendung
master.html:
Code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title th:text="${title == null} ? #{app.name} : #{app.name} + ' - ' + #{${title}}">Title</title>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link th:href="@{/css/style.css}" rel="stylesheet" media="screen"/>

        <!-- JQuery  -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>       

        <!-- Bootstrap  -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>       

        <!-- JQuery UI  -->
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <!-- Own Actions -->           
        <script th:src="@{/js/actions.js}"></script>       
    </head>
    
    <body>
        <div th:replace="${view} :: content">Content</div>
    </body>
</html>
mask.html
Code:
!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
    </head>
    
    <body>
        <div th:fragment="content" id="editor">
            <form name='f' th:object="${editor}" method='POST'>
                <select class="form-control" id="languages" th:field="*{languageID}">
                    <option th:each="language : ${used_languages}"
                            th:value="${language.id}"
                            th:text="${language.name}"                           
                    >
                    </option>     
                </select>       

                <!-- Button to Open the Modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                      Open modal
                </button>

                <!-- The Modal -->
                <div class="modal" id="addModal">
                      <div class="modal-dialog">
                        <div class="modal-content">

                              <!-- Modal Header -->
                              <div class="modal-header">
                                <h4 class="modal-title">Modal Heading</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                             </div>

                              <!-- Modal body -->
                              <div class="modal-body">
                                    Modal body..
                              </div>

                              <!-- Modal footer -->
                              <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                              </div>
                        </div>
                      </div>
                </div>               
            </form>
        </div>
    </body>
</html>
style.css
Code:
@charset "ISO-8859-1";

html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/* Editor */
#editor {
    height: 100%;
}

#editor .modal {
    height: 100%;         
}
Ich versuche schon den ganzen Tag das Bootstrap Modal auf 80% height horizontal zentriert zu bekommen. Ich habe viele unterschiedliche CSS Anweisungen ausprobiert, allerdings ohne Erfolg.

Wer könnt mir bitte kurz hierbei helfen?
 
Thema: 

Thymleaf Web: Bootstrap Modal auf 80% height horizontal zentriert

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben