Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Opening html file into Bootstrap Modal

    Hi there,

    this is my first post here.
    I'm working on a website using Bootstrap 3.0.2
    Right now I'm working on a gallery page that contains several thumbnail images.

    I'd like to click on the thumbs and, by using the Bootstrap Modal, open the Modal containing a detail page for each image clicked. Basically the kind of result you see on this website if you click any of the images under Work: http://sagaworld.ca/en/

    I've also tried this plugin but still no luck.
    Hope someone can help me with as I'm completely stuck right now and out of ideas.

    So, my link look like this:
    Code:
    <a href="#" launch="external.html" class="clicker" data-toggle="modal">launch</a>
    And this is the JS:
    Code:
    <script>
    var $modal = $('#ajax-modal');
     
    	$('.clicker').on('click', function(){
    		// create the backdrop and wait for next modal to be triggered
    		$('body').modalmanager('loading');
    		var myUrl = (this.getAttribute('launch'));
            url:myUrl,
    		setTimeout(function(){
    			$modal.load(myUrl, '', function(){
    				$modal.modal();
    			});
    		}, 1000);
    		});
    		 
    		$modal.on('click', '.update', function(){
    			$modal.modal('loading');
    			setTimeout(function(){
    				$modal
    				.modal('loading')
    				.find('.modal-body')
    				.prepend('<div class="alert alert-info fade in">' +
    				'Updated!<button type="button" class="close" data-dismiss="alert">&times;</button>' + '</div>');
    		}, 1000);
    });
    </script>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    WTF is the launch="external.html" attribute? That’s not valid HTML. You need to put the value into the href attribute. A link with an href attribute that has no content is semantical nonsense. Why an anchor element at all then?

    And I suppose if you used href in the script instead of “launch” then it would also work because it looks like basically all the necessary code is there.

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't remember how I've got to that launch thing, anyway.
    You mean something like this should work, right?

    Code:
    <a href="external.html" data-toggle="modal" class="clicker" >launch</a>
    
    <script>
    var $modal = $('#ajax-modal');
     
    	$('.clicker').on('click', function(){
    		// create the backdrop and wait for next modal to be triggered
    		$('body').modalmanager('loading');
    		var myUrl = (this.getAttribute(href));
            url:myUrl,
    		setTimeout(function(){
    			$modal.load(myUrl, '', function(){
    				$modal.modal();
    			});
    		}, 1000);
    		});
    		 
    		$modal.on('click', '.update', function(){
    			$modal.modal('loading');
    			setTimeout(function(){
    				$modal
    				.modal('loading')
    				.find('.modal-body')
    				.prepend('<div class="alert alert-info fade in">' +
    				'Updated!<button type="button" class="close" data-dismiss="alert">&times;</button>' + '</div>');
    		}, 1000);
    });
    </script>

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Make (this.getAttribute(href)) $(this).attr('href'), remove url:myUrl, and add return false or preventDefault to the click event:
    Code:
    $('.clicker').on('click', function(e){
      e.preventDefault();
      
    And as far as I can see that code should work.

  • #5
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've found out that Bootstrap 3 already handles external html files, just is not working 100%.
    First issue, the background of the loaded page is dark/transparent, page layout is totally messed up and the description on Bootstrap page is probably wrong:

    If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

    Code:
    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
    It seems by default the remote path value is set on false, but then why it works?
    Same thing for the other options, none of them work.

    Thanks anyway for your help VIPStephan.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •