locked
Add the image from bootstrap modal to the page RRS feed

  • Question

  • User-401818107 posted

    Hi experts, I have a adding image button  on the bootstrap modal and I have comparing images area on the bottom of the page  behind the modal window. When users clicks add button from the bootstrap modal, it will add an image to the page.  How to add the image from modal window to the page. Could you give an example? Thank you!

    Friday, December 21, 2018 5:18 AM

All replies

  • User-2054057000 posted

    Hello Jessy, 

    You first give your image on bootstrap model some id like:

    <img id="bMImg" src="someimage.jpg"/>

    Now also add a div in your page(outside your model) like:

    <div id="imageDiv"></div>

    Now in jQuery use the .attr() method to get the src of the image on the button click like:

    var image=$("#bMImg").attr("src"); 

    Then create an image inside the div like:

    $("#imageDiv").html("<img src='+image+' />");

    Thanks & Regards.

    Friday, December 21, 2018 11:00 AM
  • User475983607 posted

    Hi experts, I have a adding image button  on the bootstrap modal and I have comparing images area on the bottom of the page  behind the modal window. When users clicks add button from the bootstrap modal, it will add an image to the page.  How to add the image from modal window to the page. Could you give an example? Thank you!

    The modal is part of the page.  Simply move the element within the DOM.

    $("#source").appendTo("#destination");

    Friday, December 21, 2018 1:25 PM
  • User-401818107 posted

    Thank you experts! But I have two pages instead of one. The modal window is in a different page. 

    Monday, December 24, 2018 4:12 AM
  • User1724605321 posted

    Hi Jessy ,

    But I have two pages instead of one. The modal window is in a different page.

    You want to add image to another page ? You can pass the image name or url to that page ,  in $( document ).ready() function to load the image and append to related element  as above replies show .

    Best Regards,

    Nan Yu

    Wednesday, December 26, 2018 5:44 AM