引导模式不触发

我试图创建一个引导模式为我的项目的要求，问题是，我无法触发使用jQuery引导模式不触发

这是模态代码此模式：

<div class="container"> 
    <!-- Trigger the modal with a button --> 
    <!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> --> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
       </div> 
       <div class="modal-body"> 
        <p>Please choose if you want to open an existing ticket or to create a new one.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-toggle="modal">New Ticket</button> 
        <button type="button" class="btn btn-default" data-toggle="modal">Open Ticket</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

这是该模式应该被触发按钮：

<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="button" id="btnLogin" data-toggle="modal" data-target="#myModal" class="btn btn-success">Submit</button> 
    </div> 
</div>

最后是这样的jQuery代码：

<script> 
    $(document).ready(function() { 
     $("#btnLogin").click(function() { 
      alert(".."); 
      $("#myModal").modal(); 
      alert(".."); 
     }); 
    }); 
</script>

的问题是，该脚本代码不被触发#myModal元素

任何建议后执行吗？

来源

2016-10-13 Ali Alhamaly

'模式（ '秀'）'？ – Roberrrt

@Roberrrt谢谢亲爱的，即使这是行不通的，我也试过'modal（'toggle'）'但也不起作用 –

你有没有在你的项目中加入bootstrap库？ – pumpkinzzz

试试这个：

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

来源

2016-10-13 08:34:19

感谢您的回答，但不幸的是，它并没有解决我的问题 –

使用，你应该把一些参数.modal（ “隐藏”），或.modal（ “秀”）

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

，并请使用此按钮

<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="button" id="btnLogin" class="btn btn-success">Submit</button> 
    </div> 
</div>

来源

2016-10-13 08:34:50 HuntsMan

感谢您的答案，但不幸的是，它并没有解决我的问题 –

你是在杀死它。你已经触发你的模式通过你的按钮数据目标和jQuery脚本 – HuntsMan

我删除了jquery脚本，但仍然无法正常工作 –

在这里，你去我已经为你解决。

提醒始终把jquery引导后首先。

例

<script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script> 
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>

我不知道为什么你需要添加脚本

$(document).ready(function() { 
     $("#btnLogin").click(function() { 
      alert(".."); 
      $("#myModal").modal(); 
      alert(".."); 
     }); 
    });

DEMO

来源

2016-10-13 08:40:03 Fiido93

亲爱的，你提供的演示程序不工作，按钮不触发 –

您需要删除您的JavaScript！有没有必要的......

引导将已经打开的对话框读取属性data-toggle="modal" data-target="#myModal"在您的按钮

所以JavaScript是它打开后引起的模态正确关闭。

看到这个演示：JSFIDDLE

来源

2016-10-13 08:41:46 pumpkinzzz

我不知道什么是错了，您的演示程序工作完美，但是当我尝试在我的项目中使用它时，它不起作用！ –

好了！！我得到的代码工作之前，引导jquery脚本源！ –

试试这个：

<script> 
    $(document).ready(function() { 
     $("#btnLogin").click(function() { 

      $("#myModal").modal('toggle'); 

     }); 
    }); 
</script>

来源

2016-10-13 08:46:00

引导模式不触发

回答

相关问题