Question

我试着看一下bootstrap。当我点击＆＃34;创建新的＆＃34;我得到了模态框。我可以使用引导按钮轻松地创建它，但是我无法获得正常的标记来调用它。这可能是我做错的基本事情吗？

<a href><h6>Create New</h6>
 <div 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">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</a>

JS：

BootstrapDialog.show({
            message: 'Hi Apple!',
            buttons: [{
                label: 'Button 1'
            }, {
                label: 'Button 2',
                cssClass: 'btn-primary',
                action: function(){
                    alert('Hi Orange!');
                }
            }, {
                icon: 'glyphicon glyphicon-ban-circle',
                label: 'Button 3',
                cssClass: 'btn-warning'
            }, {
                label: 'Close',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }]
        });
</script>

Answer 1

您是否尝试过查看the docs？

此...

["Apple",{1: "Pie", 2: "Dumpling", 3: "Cider"}, "Banana", {1: "Bread", 2: "Republic"}]

应该有用。

Answer 2

正如我所见，您尝试使用BootstrapDialog来运行您的模态。我认为这不是一个更好的解决方案，因为事实上你需要在Javascript中编写尽可能多的代码，就像HTML中Bootstrap中的内置模式一样。

对于您的情况，您需要：

<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal"><h6>Create New</h6></a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        Hi, apple!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Button 1</button>
        <button type="button" class="btn btn-primary" onclick="alert('Hi Orange!')">Button 2</button>
        <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-ban-circle"></span> Button 3</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

模态引导程序和html标记

2 个答案: