modal引导和html标记

我想在引导上看起来有点。我想，当我点击“创建新的”我得到了模态框。我可以很容易地使用引导按钮，但我无法获得正常的标签来调用它。这可能是真的基本我做错了吗？modal引导和html标记

<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>

来源

2016-02-26 KrMa

首先，打开脚本标记添加到您的JS。然后，如果您创建小提琴，则更容易看到您的代码正在发生什么。（这是你的：https：//jsfiddle.net/mebz03pb/） –

另外，查看你的代码... HTML是颠倒的。在问你之前，你应该多加注意一点。这里有很好的例子：http://www.w3schools.com/bootstrap/bootstrap_modal.asp http://www.sitepoint.com/understanding-bootstrap-modals/ –

你尝试寻找the docs？

这...

<a data-toggle="modal" data-target="#myModal">Create New</a> 

<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> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </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> 
    </div> 
</div>

应该工作。

来源

2016-02-26 20:25:51 neilsimp1

非常感谢。设置一个id当然有意义： -/span>什么是 ×是什么意思？ – KrMa

这只是模态的右上角的一个十字，它忽略了模态。 –

×是'×'的html代码。 'aria-hidden =“true”'表示[元素及其所有后代对作者实现的任何用户不可见或不可察觉]（https://www.paciellogroup.com/blog/2012/ 05/html5-accessibility-chops-hidden-and-aria-hidden /） – neilsimp1

正如我所看到的，您尝试使用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>

来源

2016-02-26 20:40:17

modal引导和html标记

回答

相关问题