Question

我尝试了其他问题的一些方法用于bootstrap模式但是我使用bootstrap 3.3.7这应该不是问题，但我不知道为什么每次我点击按钮时都会发生这种情况我的jumbotron收缩!!任何帮助将不胜感激。

我的HTML代码：

<div class="jumbotron">
   <div id="post"></div>
   <div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
      <button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
         <img src="/uploads/text.png" style="height:40px;width:40px" />
      </button>
   </div>
</div>

我的javascript函数：

function erase(){
  $('#post').empty();

  $('#post').html('<div class="modal fade" id="myModal1" role="dialog">'+'<div class="modal-dialog">'+'<div class="modal-content">'+
            '<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal">&times;</button>'+
            '<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+
            '<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+

          '<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+ 
          '</div>'+
          '<div class="text-right">'+
          '<button type="submit" id="sub"class="btn btn-primary">POST</button>'+
          '</div>'+
          '</form><div class="media-body"> <a href="#"><h5 class="media-heading" style="color:#3369e8"></h5></a>'+
           '</div>'+
           '</div>'+
           '</div>'+'<div class="modal-footer">'+
            '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+
            '</div>'+'</div>'+'</div>');
        }

Answer 1

您可以使用解决方案https://jsfiddle.net/qc9dgefg/2/

＆＃13;

 erase = function(){
  $('#post').empty();

  $('#post').html(
  	`<div class="modal fade" id="myModal1" role="dialog">
			<div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>
          </div>
          <div class="modal-body">
            <div class="media">
              <div class="media-left"> 
                <form action="porthome_.php" method="post" id="usrform" >
                  <div class="form-group">
                    <strong>
                      <span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> 
                        Write your post:
                    </strong>
                    <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post."> 
                  </div>
                  <div class="text-right">
                    <button type="submit" id="sub"class="btn btn-primary">POST</button>
                  </div>
                </form>
                <div class="media-body"> 
                  <a href="#"><h5 class="media-heading" style="color:#3369e8"></h5></a>
                </div>
              </div>
            </div>
					</div>
        	<div class="modal-footer">
        		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        	</div>
				</div>
			</div>
		</div>`);
        }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="jumbotron">
    <div id="post"></div>
    <div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
      <button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
        <img src="http://via.placeholder.com/350x150" style="height:40px;width:40px">
      </button>
    </div>
  </div>
</div>

＆＃13;

关闭div标签 。

我添加了结束div标记以及{strong>格式化 HTML中的动态JavaScript。

Bootstrap模式将我的jumbotron推向镀铬但不在边缘？

1 个答案: