Home Forums Porto Admin Template modal on the modal page

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #10030768


    I added a modal to the Modal page. When I clicked on the modal page placed on a Modal page, the first major modal page disappeared. Please see the screenshot.


    I’d like to have the main modal page stay and see the secondary modal on top of the first modal. How can I change the coding?

    Thank you so much.




    Unfortunately this is not possible with two Magnific Popup modals.
    The first modal always will be replaced with the new modal.

    The only way is use a Magnific Popup Modal and inside you put a Bootstrap Modal.

    1) First add this HTML in any part of your page (not inside the first modal):

    <!-- Modal Bootstrap -->
    <div class="modal" id="modalBootstrap" tabindex="-1" role="dialog">
    	<div class="modal-dialog" role="document">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h5 class="modal-title">Are you sure?</h5>
    				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    					<span aria-hidden="true">&times;</span>
    			<div class="modal-body">
    				<p>Are you sure that you want to delete this image?</p>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-primary">Confirm</button>
    				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

    2) Use this HTML for the button that trigger bootstrap modal (the second modal):

    <a class="mb-1 mt-1 mr-1 btn btn-default" data-toggle="modal" data-target="#modalBootstrap" href="#">Bootstrap</a>

    3) Add in (css/custom.css:

    .modal-open .modal {
    	z-index: 99999;

    We hope this helps.

    Let us know if you have more questions.

    Kind Regards,


Viewing 2 posts - 1 through 2 (of 2 total)