如何根據psd在引導模式對話框中彈出菜單項？

Question

我在我的網站上使用Bootstrap v3.3.5。

現在我已經模態對話框的HTML代碼如下：

<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog"> 
    <div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;"> 
    <div class="modal-content" style="border:0;"> 
     <div role="document" class="modal-dialog event-planner"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <h4 id="myModalLabel" class="modal-title">Event Details</h4> 
      </div> 
      <div class="modal-body"> 
      <div class="row"> 
       <div class="col-sm-6 col-md-6 col-sm-12"> 
       <div class="event-title"> 
       NewDemoEvent5 
       <input name="hid_event_id" id="hid_event_id" value="501" type="hidden"> 
       </div> 
       <ul> 
        <li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li> 
        <li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li> 
        <li> 
         <a href="javascript:void(0)" onclick="viewLocationOnMap();"> <img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt=""></a> 
        <a href="javascript:void(0)" onclick="viewLocationOnMap();">Home Nightclub, Sydney, New South Wales, Australia</a> 
        </li> 
        <li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li> 
        </ul> 
       </div> 
       <div class="col-sm-6 col-md-6 col-sm-12"> 
       <div class="form-group" align="right"> 
        <select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;"> 
        <option value="0">I am..</option> 
        <option value="1" selected="selected">Going</option> 
        <option value="2">Maybe</option> 
        <option value="3">Not Going</option> 
        </select> 
       </div> 
       </div> 
      </div> 
      <hr> 
      <div class="row"> 
       <div class="event-menu"> 
       <ul class="nav nav-tabs" id="myTab"> 
        <li class=""><a aria-expanded="false" href="#description" data-toggle="tab">Description</a></li> 
        <li><a href="#feeds" data-toggle="tab">Feeds</a></li> 
        <li><a href="#going" data-toggle="tab">Going</a></li> 
        <li><a href="#maybe" data-toggle="tab">Maybe</a></li> 
        <li class="active"><a aria-expanded="true" href="#notgoing" data-toggle="tab">Not Going</a></li> 
       </ul> 
       </div> 
      </div> 
      <hr> 
      <div class="tab-content"> 
       <div class="tab-pane" id="description"> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12"> 
        DemoEvent5 is added successfully. 
        </div> 
       </div> 
       </div>   
       <div class="tab-pane" id="feeds"> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12"> 
        Work In Progress 
        </div> 
       </div> 
       </div> 
       <div class="tab-pane" id="going"> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12"> 
        <div class="col-md-2 col-sm-2 col-xs-12 no-padding"> 
         <div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt=""> 
         <span class="author">Sushil Kadam</span> 
         <span class="degree"></span> 
         </div> 
        </div>    
        </div> 
       </div> 
       </div>  
       <div class="tab-pane" id="maybe"> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12"> 
        </div> 
       </div> 
       </div>  
       <div class="tab-pane active" id="notgoing"> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12"> 
        </div> 
       </div> 
       </div>  
      </div>  
      </div> 
      <div class="modal-footer"> 
      <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

在此模式對話框我想說明三個黑色色大膽點，在點擊這些點的垂直彈出菜單應打開包含菜單編輯事件，邀請成員，刪除事件。每個菜單項都應該用水平線分開。當用戶在打開的菜單之外的其他地方點擊時，菜單彈出窗口應該關閉。

PFA psd圖像，以供參考我需要做的事情。

實際上在彈出式菜單後面隱藏了三個黑色粗黑點。

我想完全相同的功能工作。

謝謝。

Answer 1

試試這個HTML它採用自舉：

<div class="dropdown"> 
    <p class="dropdown-toggle" data-toggle="dropdown"> 
    <a class="glyphicon glyphicon-option-horizontal"></a></p> 
    <ul class="dropdown-menu"> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">JavaScript</a></li> 
    </ul>