为什么我的模态不会弹出在页面中？

我有一个应该弹出的模式，当我点击按钮。但是，当我点击按钮;什么也没有发生：为什么我的模态不会弹出在页面中？

继承人我所做的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> \t 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<body> 
 
\t \t <div class = "row text-center"> 
 
    \t \t \t <input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save"> 
 
    \t \t \t 
 
    \t \t \t <input class="btn btn-danger" id="reset-button" type="reset" value="Reset"> 
 

 

 
\t \t \t <div class="well well-large"> 
 
\t \t \t \t <div id="form-content" class="modal hide fade in" style="display: none;"> 
 
\t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t <a class="close" data-dismiss="modal">×</a> 
 
\t \t \t \t \t \t <h3>Add transaction</h3> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t <form class="transaction" name="transaction"> 
 
\t \t \t \t \t \t \t <input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <label class="label" for="trans_payment_mode">Payment mode</label><br> 
 
\t \t \t \t \t \t \t <select class="form-control" name="trans_payment_mode" id="payment_mode" class="required"> 
 
\t \t \t \t \t \t \t \t <option value="">Select</option> 
 
\t \t \t \t \t \t \t \t <option value="cash">Cash</option> 
 
\t \t \t \t \t \t \t </select><br> 
 

 
\t \t \t \t \t \t \t <label class="label" for="trans_amt">Transaction amount</label><br> 
 
\t \t \t \t \t \t \t <input type="text" name="trans_amt" class="input-xlarge"><br> 
 

 
\t \t \t \t \t \t \t <label class="label" for="trans_details">Transaction details</label><br> 
 
\t \t \t \t \t \t \t <textarea name="trans_details" class="input-xlarge"></textarea> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br> 
 
\t \t \t \t \t \t \t <input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br> 
 
\t \t \t \t \t \t </form> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t \t <input class="btn btn-success" type="submit" value="Send" id="submit_trans"> 
 
\t \t \t \t \t \t <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
    \t \t \t <div id="thanks"> 
 
    \t \t \t \t <p><a data-toggle="modal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p> 
 
    \t \t \t </div> 
 

 
\t \t </div> 
 
    </body>

我有一个包含附加的交易，这将填充模态上述模式。请帮忙。

来源

2016-01-06 Nevermore

HTTP缺少的add-transactionid：//www.w3schools。 com/bootstrap/bootstrap_modal.asp – j08691

CSS需要一点工作，但您在按钮中缺少data_target类。使用类模式对话框添加带有ID和div的div。

也改变了线路

<div id="form-content" class="modal hide fade in" style="display: none;">

到

<div id="modal-content">

其它代码修改

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

... 

<p><a data-toggle="modal" data-target="#myModal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>

你可以看到它在拨弄之下

https://jsfiddle.net/4peLpye5/1/

编辑 - 没有PHP的JSFiddle

来源

2016-01-06 16:16:48 blairmeister

它工作。谢谢。 – Nevermore

这是几个问题的组合。

无需为hide类的模态
无需为display:none风格上的模态
的模式

来源

2016-01-06 16:18:44

它有助于纠正我的模式。谢谢丹尼尔。 – Nevermore

为什么我的模态不会弹出在页面中？

回答

相关问题