locked
Bootstrap Modal in Sharepoint RRS feed

  • Question

  • can anybody please provide the source code (or any article link) for implementing bootstrap modal in sharepoint 2013.

    - when user clicks one button, one modal should popup containing some html elements (textbox, button,. etc..)

    Thanks,

    Balaram

    Thursday, March 21, 2019 6:11 AM

Answers

  • Hi Balaram,

    If my reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best regards,
    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Balaram S Friday, March 22, 2019 5:38 AM
    Friday, March 22, 2019 1:15 AM

All replies

  • Hi Balaram,

    The following code example for your reference, add the code into a script editor web part.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
    	<div class="modal-header">
    	  <button type="button" class="close" data-dismiss="modal">&times;</button>
    	  <h4 class="modal-title">Modal Header</h4>
    	</div>
    	<div class="modal-body">
    	  <p>This is a large modal.</p>
    	</div>
    	<div class="modal-footer">
    	  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    	</div>
      </div>
    </div>
    </div>
    

    More information:

    https://www.w3schools.com/bootstrap/bootstrap_modal.asp

    We can also use the default Modal Dialog in SharePoint.

    https://www.c-sharpcorner.com/article/create-modal-dialog-pop-up-in-sharepoint-2016-and-office-365/

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, March 21, 2019 8:45 AM
  • thanks Dennis....
    Thursday, March 21, 2019 10:59 AM
  • Hi Balaram,

    If my reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best regards,
    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Balaram S Friday, March 22, 2019 5:38 AM
    Friday, March 22, 2019 1:15 AM