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

回答

相關問題