2015-07-21 2 views
0

У меня есть модальное диалоговое окно, в котором, как предполагается, чтобы показать, код выглядит следующим образом:самозагрузки модальное диалоговое окно не появляется

 <span style="vertical-align:top;"><a href="#myModal" role="button" class="btn btn-small btn-red" data-toggle="modal"> Delete League </a></span> 

<!-- start of modal dialog box --> 
<div class="modal hide fade" id="myModal"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
    <p>Ut nunc libero, sodales venenatis gravida nec, posuere quis ante. 
     Phasellus lobortis molestie felis, vitae sagittis ipsum vehicula lobortis. 
     </p> 
    <p>Quisque lacus mi, gravida vel facilisis ac, malesuada vel augue. 
     In ac leo eget tellus aliquet aliquam. Nam faucibus urna ac justo fringilla eu 
     sollicitudin quam pretium. Proin pellentesque adipiscing sapien, non dignissim 
     massa porttitor dictum. Integer tempor aliquam arcu, eget vehicula ipsum auctor at.</p> 
    </div> 
    <div class="modal-footer" data-dismiss="modal"> 
    <a href="#" class="btn">Close</a> 
    <a href="#" class="btn btn-green">Save changes</a> 
    </div> 
</div> 
<%-- end of modal dialog box --%> 

код просто ничего не делает, ничего не происходит при нажатии, посмотрел на многих примерах в сети, и все они выглядят одинаково. У меня есть файл package.config, и это, как представляется, включает ссылку на загрузку. Все остальное место сайта относится к загрузке, я бы сказал, работает нормально, поэтому я считаю, что ссылка есть. Файл пакета выглядит следующим образом:

<?xml version="1.0" encoding="utf-8"?> 
<packages> 
    <package id="bootstrap" version="3.3.1" targetFramework="net45" /> 
    <package id="jQuery" version="2.1.3" targetFramework="net35" /> 
</packages> 

Я предполагаю, что я должен быть отсутствующим ссылку на что-то где-то, если ошибка не будет с моим кодом, любая любые предложения ...

+0

вы должны попробовать '$ ('# myModal'). Modal ('toggle');' в событии document.ready или когда вы хотите, чтобы модальный отображался. также можете ли вы проверить свою консоль, чтобы увидеть, есть ли у вас какие-либо ошибки? – Sushil

ответ

0

Ваши модальный но вам нужно удалить класс «hide» из внешнего div. Также для того, чтобы иметь правильный визуальный аспект, вам нужно добавить еще два разделителя обертки сразу после внешнего, имеющих модальные диалоги классов и соответственно «модальное содержание». Здесь Вы можете найти адаптированного код:

<!-- start of modal dialog box --> 
<div class="modal fade" id="myModal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h3>Modal header</h3> 
      </div> 
      <div class="modal-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
       <p> 
        Ut nunc libero, sodales venenatis gravida nec, posuere quis ante. 
        Phasellus lobortis molestie felis, vitae sagittis ipsum vehicula lobortis. 
       </p> 
       <p> 
        Quisque lacus mi, gravida vel facilisis ac, malesuada vel augue. 
        In ac leo eget tellus aliquet aliquam. Nam faucibus urna ac justo fringilla eu 
        sollicitudin quam pretium. Proin pellentesque adipiscing sapien, non dignissim 
        massa porttitor dictum. Integer tempor aliquam arcu, eget vehicula ipsum auctor at. 
       </p> 
      </div> 
      <div class="modal-footer" data-dismiss="modal"> 
       <a href="#" class="btn">Close</a> 
       <a href="#" class="btn btn-green">Save changes</a> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- end of modal dialog box --> 

Для того, чтобы отобразить модальный вы можете использовать:

$('#myModal').modal(); 
$('#myModal').modal('show'); 

Пожалуйста, проверьте этот JSFIDDLE для рабочей демонстрации.

+0

Огромное спасибо за вашу помощь, я думаю, что мне не хватало ссылки на файл JavaScript, когда я добавил следующее, что он работал:

Смежные вопросы