Question

我有一个类<div id="modal-data"></div>，它位于模态

中

这是代码：

<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="color-line"></div>
                            <div class="modal-header text-center">
                                <h4 class="modal-title">Select Theme</h4>
                            </div>
                            <div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
                            <div id="modal-data"></div>
                            </select>
                            </div>
                            </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" id="submit" class="btn btn-success">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>

使用这段代码：

$("#mymdl").modal({
    fadeDuration: 1000,
    fadeDelay: 1,
    closeClass: 'icon-remove',
    closeText: 'X'
});

var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<option value='x'>Create</option>");

但它不起作用......任何人都可以帮忙吗？

Answer 1

试试这个

＆＃13;

 $(document).ready(function() {

$("#mymdl").modal({
    fadeDuration: 1000,
    fadeDelay: 1,
    closeClass: 'icon-remove',
    closeText: 'X'
});

var mymodal1 = $('#mymdl');
mymodal1.find('#timezone').html("<option>Hi there</option>");

 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="color-line"></div>
            <div class="modal-header text-center">
                <h4 class="modal-title">Select Theme</h4>
            </div>
            <div class="modal-body">
            <div class="form-group">
            <div class="col-sm-10">
            <select class="js-source-states" style="width: 100%" id="timezone">
            </select>
            </div>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="submit" class="btn btn-success">Submit</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

您在div元素内写入块元素select时，您的DOM结构是错误的。它应该如下：

<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="color-line"></div>
        <div class="modal-header text-center">
            <h4 class="modal-title">Select Theme</h4>
        </div>
        <div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">

        </select>
        <div id="modal-data"></div>
        </div>
        </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" id="submit" class="btn btn-success">Submit</button>
        </div>
    </div>
</div>

此外，您应该在特定的回调下编写代码，在这种情况下，您应该在show.bs.modal回调：

$('#mymdl').on('show.bs.modal', function (e) {
    var mymodal1 = $('#mymdl');
    mymodal1.find('#modal-data').html("<h1>HI</h1>");
})

Answer 3

$('.modal-content').find('.modal-body').append('<p>append some html here</p>');
$('.modal-content').find('.modal-body').append('<h1>Hi</h1>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="mdlbtn">Close</button>
      </div>
    </div>
  </div>
</div>

我认为这就是你想要的。如果是我可以解释你

如何更新模态体内的类？

3 个答案: