Question

所以我试图使用bootstrap.min css框架创建简单的模态视图，并且无法创建多个不同的模态。我知道它与ID和类有关（我知道ID是唯一的，类可以重复使用）...所以我认为它与重命名/有关编辑id = myModalLabel ......？下面是我的代码到目前为止，它适用于portfolioModal1但不适用于portfolioModal2。 portfolioModal2的按钮启动，但模态视图为空白...

非常感谢您的帮助！

HTML：

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


            <div class="row">
                <div class="col-sm-4">
                    <div class="team-member">
                        <img src="img/portfolio/dan-circle.png" class="img-responsive img-circle" alt="">
                        <h4>Dan Druffel</h4>
                        <center><p class="text-muted">CEO</p></center>
                        <ul class="list-inline social-buttons">
                            <li><a href="#"><i class="fa fa-twitter"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a>
                            </li>
                        </ul><br>
<a href="#portfolioModal1" class="btn btn-lg btn-success"
   data-toggle="modal"
   data-target="#portfolioModal1">About Dan</a>
                    </div>
                </div>


                <div class="col-sm-4">
                    <div class="team-member">
                        <img src="img/portfolio/pody-circle.png" class="img-responsive img-circle" alt="">
                        <h4>Pody Druffel</h4>
                        <p class="text-muted">CFO</p>
                        <ul class="list-inline social-buttons">
                            <li><a href="#"><i class="fa fa-twitter"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a>
                            </li>
                        </ul><br>

              <a href="#portfolioModal2" class="btn btn-lg btn-success"
   data-toggle="modal"
   data-target="#portfolioModal2">About Pody</a>
                    </div>
                </div>


 <!-- Modal Views -->
<div class="modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Dan founded the company in 1970 as a small lawncare company which quickly grew into the industry leading design build firm it is today. Dan has extensive project management experience serving as the general contractor on a plethora of different types of engagements for over four decades. As a testament to Dan's success the Ohio Nursery & Landscape Association Awards Program has accredited him with 26 state awards and the Civic Garden Center of Greater Cincinnati has accredited him with 20 Civic Beautification Awards. Dan is also a certified pesticide applicator.</h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>
    </div>
  </div>


<div class="modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Pody became involved in the business in 1980.  Pody manages the accounting and financial analysis for the businesses. Pody spent three years of her collegiate career at the Ohio State University before completing her Bachelor's in Business Administration from the University of Cincinnati with an emphasis in marketing. </h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>
    </div>
  </div>

<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

Answer 1

最好使用Bootbox扩展Bootstrap模式，这里是插件的链接

http://bootboxjs.com/examples.html

并像这样称呼它

bootbox.dialog({
                title: "This is a form in a modal.",
                message: '<div class="row">  ' +
                    '<div class="col-md-12"> ' +
                    '<form class="form-horizontal"> ' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-4 control-label" for="name">Name</label> ' +
                    '<div class="col-md-4"> ' +
                    '<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
                    '<span class="help-block">Here goes your name</span> </div> ' +
                    '</div> ' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
                    '<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
                    '<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
                    'Really awesome </label> ' +
                    '</div><div class="radio"> <label for="awesomeness-1"> ' +
                    '<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
                    '</div> ' +
                    '</div> </div>' +
                    '</form> </div>  </div>',
                buttons: {
                    success: {
                        label: "Save",
                        className: "btn-success",
                        callback: function () {
                            var name = $('#name').val();
                            var answer = $("input[name='awesomeness']:checked").val());
                        }
                    }
                }
            }
        );

bootstrap 3模态ID和类

1 个答案: