Heim > Artikel > Web-Frontend > Code-Implementierung der dynamischen Modalbox und der statischen Modalbox in BootStrap

Code-Implementierung der dynamischen Modalbox und der statischen Modalbox in BootStrap

不言Original: 2018-08-13 10:00:461986Durchsuche

In diesem Artikel geht es um die Code-Implementierung von dynamischen Modalboxen und statischen Modalboxen in BootStrap. Ich hoffe, dass er für Sie hilfreich ist.

Um das BootStrap-Framework zu verwenden, müssen Sie seine Klasse überladen, was bedeutet, dass die Klasse dieselbe sein muss

Der Code lautet wie folgt:

Dynamische Modalbox

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="bootstrap-3.3.7/js/docs.min.js"></script>

</head>
<body>
        <div>
                <div>
                    <div>bootstrap框架 <small>s</small>
                    </div>
                </div>
    <!-- 动态框 -->
<div>
    <!-- modal默认是隐藏的 -->
    <div>                  
        <div>
         <!-- 头部关闭按钮 -->
            <div>             
                <button type="button" class="close myclose" data-dismiss="modal"><span >&times</span></button>
                <div class="h3 modal-title">标题部分</div>
                <!-- 内容部分 -->
                <div>
                    <P>这是内容部分</P>
                </div>
                <!-- 页脚 -->
                <div>
                    <button type="button" class="btn btn-primary myclose" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-warning myclose">save</button>
                </div>
            </div>
        </div>
    </div>
    
</div>
    <a href="#" class="btn btn-success" id="show">显示对话框</a>
        </div>
</body>
</html>
<script>
    $(function(){
        $(&#39;#show&#39;).click(function(){
            $(&#39;.modal&#39;).modal(&#39;show&#39;)
        })
    })
</script>

Statische modale Box

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="bootstrap-3.3.7/js/docs.min.js"></script>
</head>
<body>
    <div>
        <div>
            <div>bootstrap框架 <small>s</small>
            </div>
           
         <!-- 静态模态框 官方有一个bug就是在写静态框的时候在按钮上要绑定同一个class-->
                <div>
                    <div>
                        <div>
                            <button type="button" class="close myclose" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                            <h3>Model标题</h3>                            
                     </div>
                     <!-- body部分 -->
                     <div>
                         <p>这是身体部分</p>
                     </div>
                     <!-- footer部分 -->
                     <div>
                         <button class="btn btn-info myclose" data-dismiss="modal">close</button>
                         <button class="btn btn-primary myclose">save</button>
                     </div>
                    </div>
                </div>
           </div>
 </div> 
      </div>
    </div>
</body>
</html>
<script>
    $(function(){
        $(&#39;.myclose&#39;).click(function(){
            $(&#39;.modal-dialog&#39;).css(&#39;display&#39;,&#39;none&#39;)
        })
    })
</script>

Verwandte Empfehlungen:

Wie werden Tabellen in HTML erstellt? (Codebeispiel)

Kombinieren von 2D und 3D in HTML und CSS3, um Animationseffekte zu erzielen

Verschiedene Verwendungen von select in HTML Zusammenfassung (Code)

Das obige ist der detaillierte Inhalt vonCode-Implementierung der dynamischen Modalbox und der statischen Modalbox in BootStrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erziele ich beim Laden einer Webseite einen CSS-Stileffekt? (verschiedene Stilbeispiele)Nächster Artikel：Wie erziele ich beim Laden einer Webseite einen CSS-Stileffekt? (verschiedene Stilbeispiele)

In Verbindung stehende Artikel

Mehr sehen