为什么我的模态引导形式表现得像这样?

时间:2015-11-01 21:07:19

标签: jquery css twitter-bootstrap

我的模态没有显示,因为我需要它由于某种原因控制被放在左边。基本上我想要一个数字字段和消息区域的能力,他们可以正确评论他们兑换积分。

echo "<div id='thanks' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>";
echo "<h4 class='modal-title'>Redeem Points</h4>";
echo "</div>";
echo "<form class='form-horizontal'  class='contact' name='redemmpointsForm' id='redemmpointsForm' >";
echo " <div class='form-group'>";
echo "<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>";
echo "<input type='hidden' name='playerid' value='<?php echo $playerId;;?>' />";
echo "<input type='number'  valuemax='<?php echo $maxpoints;?>' name='points' id='points' class='form-control' placeholder='How many points do you wish to redeem.' />";
echo "<label class='control-label col-md-4' for='Comments'>Comments?</label>";
echo "<input type='text' name='comments' />";
echo "</div>";
echo "<div class='form-group'>";
echo "<div class='col-md-6'>";
echo "<input type='button' class='btn btn-success' name='submit' id='submit' Text='Submit'>";
echo "<a href='#' class='btn' data-dismiss='modal'>Close</a>";
echo "</div>";
echo "</div>";
echo "</form>";
echo "</div>";
echo "</div>";
echo "</div>";
}

enter image description here

1 个答案:

答案 0 :(得分:1)

<form></form>放入<div class="modal-body"></div>

without <div class="modal-body"></div>

echo "<div class='modal-body'>";
echo "<form class='form-horizontal'  class='contact' name='redemmpointsForm' id='redemmpointsForm' >";
echo " <div class='form-group'>";
echo "<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>";
echo "<input type='hidden' name='playerid' value='<?php echo $playerId;;?>' />";
echo "<input type='number'  valuemax='<?php echo $maxpoints;?>' name='points' id='points' class='form-control' placeholder='How many points do you wish to redeem.' />";
echo "<label class='control-label col-md-4' for='Comments'>Comments?</label>";
echo "<input type='text' name='comments' />";
echo "     </div>";
echo "    <div class='form-group'>";
echo "            <div class='col-md-6'>";
echo "                <input type='button' class='btn btn-success' name='submit' id='submit' Text='Submit'>";
echo "     <a href='#' class='btn' data-dismiss='modal'>Close</a>";
echo "         </div>";
echo "      </div>";
echo "</form>";
echo "</div>";

将解决问题

Fiddle

SideNote:如果从class='form-horizontal'中删除<form>并使用bootstrap网格系统,可以更好地查看和控制表单元素

Fiddle