2016-04-28 70 views
0

該模型將加載點擊圖標圖像。

<div class="modal fade" id="profilePicModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content">   
       <div class="modal-body"><div id="jsoneditor"> 
        <img src="" id="profilePic" style="width: 100%; height: 100%;" > 
       </div></div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

JS代碼點擊圖標圖像,然後打開模型更改模型上的新圖像。

$("#image").on("click", function() { 
     $('#profilePic').attr('src', $(this).attr('value')); 
     $('#profilePicModal').modal('show'); 
     $('#profilePic').cropper({ 
     aspectRatio: 16/9, 
     crop: function(e) { 

     } 
}); 
    }); 
+2

你的問題是? – colburton

+0

其實我想要像gmail一樣更改個人資料圖片。 –

回答

0

以下是根據用戶選擇更改圖像的代碼。這些圖像與HTML文件放在同一個文件夾中。

<script> 
    function go(loc) { 
     document.getElementById('imagechange').src = loc; 
    } 
</script> 

<body> 
    <iframe id="imagechange" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe> 

    <form method="post"> 
     <input name="calendarSelection" type="button" Value=" River1" onclick="go('river2.jpg')" /> 
     <input name="calendarSelection" type="button" value=" GitHub" onclick="go('riverrafting.jpg')" /> 
     <input name="calendarSelection" type="button" value=" Wikipedia" onclick="go('Employee.jpg')" /> 

    </form> 

</body>