簡體   English   中英

為什么我的引導程序模式不會彈出?

[英]Why won't my bootstrap modal pop up?

我希望在頁面加載后立即彈出新聞通訊模版,但在加載屏幕時加載模版時遇到了一些麻煩。 有人能幫我嗎?

<!-- Introduction Modal -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Subscribe our Newsletter</h4>
                </div>
                <div class="modal-body">
                    <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Name">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Email Address">
                        </div>
                        <button type="submit" class="btn btn-primary">Subscribe</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Popup -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myModal").modal('show');
        });
    </script>

您的代碼工作正常,您可以嘗試檢查您的jquery鏈接和bootstrap鏈接

 $(function() { $("#myModal").modal(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Subscribe our Newsletter</h4> </div> <div class="modal-body"> <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Name"> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Email Address"> </div> <button type="submit" class="btn btn-primary">Subscribe</button> </form> </div> </div> </div> </div> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM