Creating modal in bootstrap

-1

I have a website running on Bootstrap, JQuery, HTML, CSS.
I want to add a modal output on my website such that when a user clicks on a hyperlink a modal opens and prints content of a txt file.
E.g. I have two text files which contains different details. And my website consists of sentence --> This is sam. This is his website. I want that when a user clicks on sam or website the respective text file is opened in a simple modal.

asked Nov 14 '18 at 10:06

Insta

link tou attached don't work... and show your code please
– לבני מלכה
Nov 14 '18 at 10:07

I have added the link for example.
– Insta
Nov 14 '18 at 10:08

@לבנימלכה Currently I have just added <a href> tag which opens the text file in a new tab. But I want to open the text file in a modal. So is there any way to do that?
– Insta
Nov 14 '18 at 10:10

Please read How to Ask and create a Minimal, Complete, and Verifiable example
– Alon Eitan
Nov 14 '18 at 10:10

use bootstrap model:getbootstrap.com/docs/4.0/components/modal
– לבני מלכה
Nov 14 '18 at 10:11

|
show 5 more comments

-1

asked Nov 14 '18 at 10:06

Insta

link tou attached don't work... and show your code please
– לבני מלכה
Nov 14 '18 at 10:07

I have added the link for example.
– Insta
Nov 14 '18 at 10:08

@לבנימלכה Currently I have just added <a href> tag which opens the text file in a new tab. But I want to open the text file in a modal. So is there any way to do that?
– Insta
Nov 14 '18 at 10:10

Please read How to Ask and create a Minimal, Complete, and Verifiable example
– Alon Eitan
Nov 14 '18 at 10:10

use bootstrap model:getbootstrap.com/docs/4.0/components/modal
– לבני מלכה
Nov 14 '18 at 10:11

|
show 5 more comments

-1

asked Nov 14 '18 at 10:06

Insta

jquery html css bootstrap-modal simplemodal

asked Nov 14 '18 at 10:06

Insta

asked Nov 14 '18 at 10:06

Insta

asked Nov 14 '18 at 10:06

Insta

asked Nov 14 '18 at 10:06

Insta

asked Nov 14 '18 at 10:06

Insta

link tou attached don't work... and show your code please
– לבני מלכה
Nov 14 '18 at 10:07

I have added the link for example.
– Insta
Nov 14 '18 at 10:08

@לבנימלכה Currently I have just added <a href> tag which opens the text file in a new tab. But I want to open the text file in a modal. So is there any way to do that?
– Insta
Nov 14 '18 at 10:10

Please read How to Ask and create a Minimal, Complete, and Verifiable example
– Alon Eitan
Nov 14 '18 at 10:10

use bootstrap model:getbootstrap.com/docs/4.0/components/modal
– לבני מלכה
Nov 14 '18 at 10:11

|
show 5 more comments

link tou attached don't work... and show your code please
– לבני מלכה
Nov 14 '18 at 10:07

I have added the link for example.
– Insta
Nov 14 '18 at 10:08

@לבנימלכה Currently I have just added <a href> tag which opens the text file in a new tab. But I want to open the text file in a modal. So is there any way to do that?
– Insta
Nov 14 '18 at 10:10

Please read How to Ask and create a Minimal, Complete, and Verifiable example
– Alon Eitan
Nov 14 '18 at 10:10

use bootstrap model:getbootstrap.com/docs/4.0/components/modal
– לבני מלכה
Nov 14 '18 at 10:11

link tou attached don't work... and show your code please
– לבני מלכה
Nov 14 '18 at 10:07

I have added the link for example.
– Insta
Nov 14 '18 at 10:08

@לבנימלכה Currently I have just added <a href> tag which opens the text file in a new tab. But I want to open the text file in a modal. So is there any way to do that?
– Insta
Nov 14 '18 at 10:10

Please read How to Ask and create a Minimal, Complete, and Verifiable example
– Alon Eitan
Nov 14 '18 at 10:10

use bootstrap model:getbootstrap.com/docs/4.0/components/modal
– לבני מלכה
Nov 14 '18 at 10:11

|
show 5 more comments

1 Answer
1

active

oldest

votes

Use bootstrap-modal and instead use button use a:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class="container">

 

 

  <a href="#"  data-toggle="modal" data-target="#myModal">

    Open modal from a

  </a>



  <!-- The Modal -->

  <div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

      

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

        

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

        

      </div>

    </div>

  </div>

  

</div>

Edit to you comment

is there any way I could output the content of text file in that
modal? E.g. to view http://humanstxt.org/humans.txt in the modal?
Use:

$.get( "http://humanstxt.org/humans.txt", function( data ) {

  $('.modal-body').html= data;

});

Or with .ajax:

$(document).ready(function(){

        $.ajax({url: "http://humanstxt.org/humans.txt", success: function(result){

            $('.modal-body').html(result);

        }});

});

edited Nov 14 '18 at 11:05

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

please mark as answer
– לבני מלכה
Nov 14 '18 at 10:46

see edit please
– לבני מלכה
Nov 14 '18 at 11:05

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297593%2fcreating-modal-in-bootstrap%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Use bootstrap-modal and instead use button use a:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class="container">

 

 

  <a href="#"  data-toggle="modal" data-target="#myModal">

    Open modal from a

  </a>



  <!-- The Modal -->

  <div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

      

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

        

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

        

      </div>

    </div>

  </div>

  

</div>

Edit to you comment

is there any way I could output the content of text file in that
modal? E.g. to view http://humanstxt.org/humans.txt in the modal?
Use:

$.get( "http://humanstxt.org/humans.txt", function( data ) {

  $('.modal-body').html= data;

});

Or with .ajax:

$(document).ready(function(){

        $.ajax({url: "http://humanstxt.org/humans.txt", success: function(result){

            $('.modal-body').html(result);

        }});

});

edited Nov 14 '18 at 11:05

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

please mark as answer
– לבני מלכה
Nov 14 '18 at 10:46

see edit please
– לבני מלכה
Nov 14 '18 at 11:05

add a comment |

Use bootstrap-modal and instead use button use a:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class="container">

 

 

  <a href="#"  data-toggle="modal" data-target="#myModal">

    Open modal from a

  </a>



  <!-- The Modal -->

  <div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

      

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

        

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

        

      </div>

    </div>

  </div>

  

</div>

Edit to you comment

is there any way I could output the content of text file in that
modal? E.g. to view http://humanstxt.org/humans.txt in the modal?
Use:

$.get( "http://humanstxt.org/humans.txt", function( data ) {

  $('.modal-body').html= data;

});

Or with .ajax:

$(document).ready(function(){

        $.ajax({url: "http://humanstxt.org/humans.txt", success: function(result){

            $('.modal-body').html(result);

        }});

});

edited Nov 14 '18 at 11:05

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

please mark as answer
– לבני מלכה
Nov 14 '18 at 10:46

see edit please
– לבני מלכה
Nov 14 '18 at 11:05

add a comment |

Use bootstrap-modal and instead use button use a:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class="container">

 

 

  <a href="#"  data-toggle="modal" data-target="#myModal">

    Open modal from a

  </a>



  <!-- The Modal -->

  <div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

      

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

        

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

        

      </div>

    </div>

  </div>

  

</div>

Edit to you comment

is there any way I could output the content of text file in that
modal? E.g. to view http://humanstxt.org/humans.txt in the modal?
Use:

$.get( "http://humanstxt.org/humans.txt", function( data ) {

  $('.modal-body').html= data;

});

Or with .ajax:

$(document).ready(function(){

        $.ajax({url: "http://humanstxt.org/humans.txt", success: function(result){

            $('.modal-body').html(result);

        }});

});

edited Nov 14 '18 at 11:05

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

Use bootstrap-modal and instead use button use a:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class="container">

 

 

  <a href="#"  data-toggle="modal" data-target="#myModal">

    Open modal from a

  </a>



  <!-- The Modal -->

  <div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

      

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

        

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

        

      </div>

    </div>

  </div>

  

</div>

Edit to you comment

is there any way I could output the content of text file in that
modal? E.g. to view http://humanstxt.org/humans.txt in the modal?
Use:

$.get( "http://humanstxt.org/humans.txt", function( data ) {

  $('.modal-body').html= data;

});

Or with .ajax:

$(document).ready(function(){

        $.ajax({url: "http://humanstxt.org/humans.txt", success: function(result){

            $('.modal-body').html(result);

        }});

});

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class="container">

 

 

  <a href="#"  data-toggle="modal" data-target="#myModal">

    Open modal from a

  </a>



  <!-- The Modal -->

  <div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

      

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

        

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

        

      </div>

    </div>

  </div>

  

</div>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class="container">

 

 

  <a href="#"  data-toggle="modal" data-target="#myModal">

    Open modal from a

  </a>



  <!-- The Modal -->

  <div class="modal" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

      

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

        

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

        

      </div>

    </div>

  </div>

  

</div>

edited Nov 14 '18 at 11:05

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

edited Nov 14 '18 at 11:05

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

answered Nov 14 '18 at 10:46

לבני מלכה

9,3841726

please mark as answer
– לבני מלכה
Nov 14 '18 at 10:46

see edit please
– לבני מלכה
Nov 14 '18 at 11:05

add a comment |

please mark as answer
– לבני מלכה
Nov 14 '18 at 10:46

see edit please
– לבני מלכה
Nov 14 '18 at 11:05

please mark as answer
– לבני מלכה
Nov 14 '18 at 10:46

see edit please
– לבני מלכה
Nov 14 '18 at 11:05

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk