在点击时以模态显示内容

时间:2015-07-25 12:06:53

标签: javascript jquery twitter-bootstrap-3 bootstrap-modal

我有一个代码,在点击时更多地显示文字,在点击时再少一些。我想要的是在modal中显示内容.Below是我的代码:

<HTML>

<HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <STYLE>
        body,
        input {
            font-family: Calibri, Arial;
            margin: 0px;
            padding: 0px;
        }

        a {
            color: #0254EB
        }

        a:visited {
            color: #0254EB
        }

        #header h2 {
            color: white;
            background-color: #00A1E6;
            margin: 0px;
            padding: 5px;
        }

        .comment {
            width: 400px;
            background-color: #f0f0f0;
            margin: 10px;
        }

        a.morelink {
            text-decoration: none;
            outline: none;
        }

        .morecontent span {
            display: none;
        }
    </STYLE>
</HEAD>

<BODY>
    <div id="header">

    </div>


    <br/>
    <table border="1">
        <tr>

            <td class="comment more">
                Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[12] and specifically designed to have as few implementation dependencies as possible. It is intended to let application developers "write once, run anywhere" (WORA),[13] meaning that compiled Java code can run on all platforms that support Java without the need for recompilation.[14] Java applications are typically compiled to bytecode that can run on any Java virtual machine (JVM) regardless of computer architecture. As of 2015, Java is one of the most popular programming languages in use,[15][16][17][18] particularly for client-server web applications, with a reported 9 million developers.[citation needed] Java was originally developed by James Gosling at Sun Microsystems (which has since been acquired by Oracle Corporation) and released in 1995 as a core component of Sun Microsystems' Java platform. The language derives much of its syntax from C and C++, but it has fewer low-level facilities than either of them.</td>

            <td class="comment more">
                Microsoft Corporation (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues.[5] It is also one of the world's most valuable companies.[6]</td>

            <td class="comment more">
                Google is an American multinational technology company specializing in Internet-related services and products. These include online advertising technologies, search, cloud computing, and software.[8] Most of its profits are derived from AdWords,[9][10] an online advertising service that places advertising near the list of search results.Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Together they own about 14 percent of its shares but control 56 percent of the stockholder voting power through supervoting stock. They incorporated Google as a privately held company on September 4, 1998. An initial public offering followed on August 19, 2004. Its mission statement from the outset was "to organize the world's information and make it universally accessible and useful,"[11] and its unofficial slogan was "Don't be evil".[12][13] In 2004, Google moved to its new headquarters in Mountain View, California, nicknamed the Googleplex.[14]</td>
        </tr>
    </table>
</BODY>
<SCRIPT>
    $(document).ready(function() {
        var showChar = 100;
        var ellipsestext = "...";
        var moretext = "more";
        var lesstext = "less";
        $('.more').each(function() {
            var content = $(this).html();

            if (content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar - 1, content.length - showChar);

                var html = c + '<span      class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent">  <span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink" >' + moretext + '</a>   </span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function() {
            if ($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
</SCRIPT>

</HTML>

我尝试的是在链接之后添加data-toggle = modal但是id不起作用。请帮帮我......

1 个答案:

答案 0 :(得分:0)

有一些事情可以让这个工作......

  1. 您需要包含bootstrap.js才能使用bootstrap模式
  2. 您需要为正在显示的对话框制作模板,并为其指定ID(如myModal)。
  3. 您需要设置data-toggle =“modal”和data-target =“#myModal”(引用您之前使用的相同ID。
  4. 看看http://getbootstrap.com/javascript/#modals,特别是第二个演示:

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>